კონტრასტული ინტერფეისები და კითხვა

1) რატომ არის კონტრასტული?

• ამცირებს კოგნიტურ დატვირთვას და დაღლილობას,
• ინტერფეისის სკანირების სიჩქარის გაუმჯობესება,
• ზრდის მხედველობისა და ფერის დარღვევების მქონე ადამიანებისთვის ხელმისაწვდომობას,
• ამცირებს შეცდომების რაოდენობას ურთიერთდაკავშირებულ სცენარებში (გადახდები, ფორმები, დადასტურება).

2) ძირითადი ცნებები და ფორმულები

2. 1 WCAG კონტრასტი

• Contrast = (L1 + 0. 05) / (L2 + 0. 05), სადაც 'L1, L2', 'L' არის ფარდობითი სიკაშკაშე (0.. 1).

2. 2 სიკაშკაშე (sRGB)

1. მოიყვანეთ კომპონენტები R, G, B დიაპაზონში 0.. 1.

• თუ 'c-0. 04045 ', შემდეგ' c _ lin = c/12. 92`
• წინააღმდეგ შემთხვევაში 'c _ lin = (c + 0. 055) / 1. 055) ^ 2. 4`

3. სიკაშკაშე: 'L = 0. 2126 R_lin + 0. 7152 G_lin + 0. 0722 B_lin`

2. 3 ფერის წარმოდგენები

HSL/HSV - მოსახერხებელია სახელმძღვანელო კონფიგურაციისთვის, მაგრამ არ არის ერთგვაროვანი პერცეპტუალური.
ლაბორატორია/LCH/OKLCH - უფრო ახლოს არის ადამიანის აღქმასთან; OKLCH მოსახერხებელია მკითხველის შენარჩუნებისას მსუბუქი/გაჯერების სისტემატური ცვალებადობისთვის.

3) ნორმები და მიზნები (WCAG 2. 2)

ტექსტი - 14 pt bold ან 18 pt (ჩვეულებრივი): კონტრასტი მინიმუმ 3:1 (AA).
დანარჩენი ტექსტი: კონტრასტი მინიმუმ 4. 5:1 (AA).
AAA (გაზრდილი კითხვა): 7:1 ჩვეულებრივი ტექსტისთვის; 4. 5:1 დიდი.
იკონოგრაფია და მნიშვნელოვანი ნეფოტოგრაფიული ელემენტები (შეყვანის ველების საზღვრები, ჩეკბოქსი, კონცენტრატორები, შეცდომების ინდიკატორები): სახელმძღვანელო 3:1 ფონი.
სახელმწიფოებს (hover/focus/pressed/disabled) უნდა ჰქონდეს განსხვავება მინიმუმ 3:1 სახელმწიფოებს შორის ან ფონი, გარდა ამისა, აშკარა ნეფოტოგრაფიული ინდიკატორები (ხაზგასმულია ბმულები, ჩრდილები/ჩარჩო, სისქის შეცვლა).

4) დიზაინის სისტემა: კონტრასტის ნიშნები

ჩვენ გირჩევთ, რომ განსხვავება დაფიქსირდეს დიზაინის სისტემაში, როგორც ნიშნების საკუთრება.

• 'fg/primary' bg/base '7:1 (AAA კრიტიკული ტექსტისთვის)
• `fg/secondary` ↔ `bg/base` ≥ 4. 5:1
• 'fg/muted' bg/subtle '3:1 (ოფიციალური ტექსტი)
• 'border/defoult' bg/base '3:1 (ველის საზღვრები, ბარათები)
• `interactive/default` ↔ `bg/base` ≥ 4. 5:1 (ბმულები/ღილაკები)
• 'interactive/disabled' არ უნდა მიბაძოს აქტიურ მდგომარეობებს; გამოიყენეთ კონტრასტისა და კურსორის შემცირება/ARIA ატრიბუტები.

• თემის სიკაშკაშე (L), შემდეგ გადახრები 'S L' ფენებისთვის/ზედაპირებისთვის ('bg/subtle', 'bg/elevated'),
• ჩაწერეთ მინიმალური კონტრასტული წყვილი ტესტებში.

5) ნათელი და ბნელი თემები

ნათელი თემა: ტექსტი თითქმის შავია (არა სუფთა # 000, არამედ თბილი/ცივი ელფერით), ფონი თეთრიდან ოდნავ შეღებილი, რათა შემცირდეს „კოჭლი“.
ბნელი თემა: თავიდან აიცილეთ სუფთა # 000 ფონი - ღრმა გრაფიტი/ნახშირი L-0. 12–0. 16 ამცირებს განათებას; თეთრი ტექსტი შეამსუბუქეთ L-0. 9.
შეინარჩუნეთ იგივე კონტრასტული მიზნები ორივე თემაში; ნუ დაუშვებთ, რომ ფერის აქცენტებმა დაკარგონ კითხვა ბნელ ფონზე (ხშირად გჭირდებათ ცვლადი 'ESL "და გაჯერების დაქვეითება).

6) ტექსტი სურათებსა და ვიდეოში

გამოიყენეთ overlei (გრადიენტი/გამჭვირვალე ფენა 40-60%) ან ლაქები ტექსტის ქვეშ.
დაფარეთ მინიმუმ 4. 5:1 ტექსტსა და ადგილობრივ ფონს შორის.
დინამიური ვიდეოსთვის - ადაპტირებული ფონ/ოვერლი ჩარჩოს სიკაშკაშის ანალიზისთვის (ცენტრალური/ყალბი რეგიონის სიკაშკაშე).

7) მდგომარეობა და ინტერაქტიულობა

ბმულები უნდა გამოირჩეოდეს არა მხოლოდ ფერით: ნაგულისხმევი ხაზგასმით ან ხაზგასმით hover/focus + კონტრასტით 3:1 ჩვეულებრივი ტექსტით.
ღილაკები: ტექსტი და ხატი 4. 5:1 შევსებამდე; შევსება - 3:1 გარშემორტყმული.
შეცდომები/წარმატება/გაფრთხილებები: ნუ დაეყრდნობით ფერს; დაამატეთ ხატები/ტექსტური რჩევები; უზრუნველყეთ მინიმუმ 4 ტექსტის კონტრასტი. 5:1.

8) ფერის დარღვევის მქონე ადამიანები

• Deuteranopia/Protanopia (წითელი და მწვანე ზონა): თავიდან აიცილეთ „წითელი მწვანე“ კომბინაციები დამატებითი ნიშნების გარეშე.
• Tritanopia: ცისფერ-ყვითელი წყვილების ცალკე შემოწმება.
• გააკეთეთ ფორმები და გრაფიკები გასაგებად: ტექსტური ეტიკეტები, სხვადასხვა ტიპის დარტყმები/მარკერები, შევსების ნიმუშები, სეგმენტების ხელმოწერები.

9) სტამბა და ფონ

ძირითადი ტექსტის კეგლი: 14-16 px მინიმალური (ვებ), 16-18 px შინაარსის ზონებისთვის.
ხაზოვანი ინტერვალი 1. 4–1. 6 აუმჯობესებს კითხვას მაღალი კონტრასტის ფონზე.
მოერიდეთ წვრილმანებს არასაკმარისი კონტრასტით.
ტექსტი ფერად ფონებზე: შეამცირეთ ფონის სიმდიდრე და/ან გაზარდეთ მსუბუქი, რომ მიაღწიოთ მიზნობრივ დამოკიდებულებას.

10) დიაგრამები, ცხრილი, გრაფიკა

ხაზები/სვეტები - 3:1 ქსელის/ფონისკენ.
ღერძებისა და ლეგენდების ხელმოწერა - 4. 5:1.
გამოიყენეთ განსხვავებული ფორმები/ნიმუშები ფერის გარდა.

11) დინამიური/ადაპტირებული კონტრასტი

Auto Contrast: გამოთვალეთ ტექსტის კონტრასტული ფერი შერჩეულ შევსებაზე (მაგ., OKLCH- ის საშუალებით: შერჩევა 'L' - ს მისაღწევად 4. 5:1).
სისტემური პარამეტრები: პატივისცემა 'prefers-contrast', 'forced-colors', OS რეჟიმები.
პერსონალიზაცია: განაცხადში "მაღალი კონტრასტის" კონფიგურაცია (გაძლიერება 'ML ", ბრენდირებული აქცენტების უფრო ნეიტრალური ჩანაცვლება, ბრენდირების შენარჩუნება ფორმის/ხატების საშუალებით).

12) კონტროლის პროცესები და ავტომატიზაცია

12. 1 დიზაინერებისთვის

შეამოწმეთ განსხვავება მოდელებზე (ორივე თემასა და მთავარ ფონებზე).
შეიყვანეთ „კონტრასტული სლოტები“ კომპონენტებში (title/primary/საშუალო/hint).
თითოეული კომპონენტის დასაშვები ფონის კონტექსტების დოკუმენტირება.

12. 2 დეველოპერებისთვის

Unit helpers: კონტრასტისა და ასერტების გამოანგარიშების ფუნქცია ტესტებში ტოქსინის წყვილებისთვის.
ვიზუალური დარტყმები კონტრასტული მეტრიკის შემოწმებით (screen-Render + გაანგარიშება L1/L2).
სტილის ლინზები: „ნედლეულის“ აკრძალვა, მხოლოდ ნიშნების საშუალებით.

12. 3 CI/CD- ში

ყველა წყვილის „fg/bg“ შემოწმება თემებსა და სახელმწიფოებში.
ანგარიში დარღვევების შესახებ, კომპონენტის, ვარიანტის, თემისა და ფაქტობრივი მნიშვნელობის მითითებით (მაგალითად, 3). 9:1 საჭირო 4. 5:1).

13) iGaming სპეციფიკა (სურვილისამებრ)

ნათელი სარეკლამო ბანერები და ტურნირის ბარათები ხშირად „ჭამენ“ ტექსტს. საჭიროა ტალღა/აურზაური და ფონის გაჯერების შეზღუდვა.
პასუხისმგებელი შეტყობინებების სისტემური ელემენტები (18 +, ლიმიტები, რისკები) - AAA კონტრასტით.
ლიდერების/კოეფიციენტების ცხრილებში: რიცხვები და ნიშნები „+/-“ - 4. 5:1, მოგების განათება - არა მხოლოდ ფერი (ხატები/ეტიკეტები).

14) ანტიპატერები

დაეყრდნო მხოლოდ ფერს მდგომარეობის განასხვავებლად.
ფერის ფონზე თხელი ნაცრისფერი შრიფტები კონტრასტის გაანგარიშების გარეშე.
„მუქი ბნელი“ Dark Mode- ში, „ნათელი ნათელი“ სარეკლამო ზონებში.
ტექსტი დეტალების/ხმაურის გარეშე.

15) ჩეკის სია შურისძიებისთვის

ძირითადი ტექსტი

• ≥ 4. 5:1 (ჩვეულებრივი), 3:1 (დიდი/ცხიმოვანი).

ბმულები/ღილაკები

ხატები/საზღვრები

ღილაკის ტექსტი 4. 5:1 შევსებამდე.
სახელმწიფო განასხვავებს 3:1 ან აშკარა ინდიკატორებს.

• 3:1 ფონისკენ.

ბნელი/ნათელი თემები

მედია ფონები

კონტრასტის იგივე მიზნები მიღწეულია.

• ოვერლი/ფირფიტა, კოეფიციენტი შენარჩუნებულია.

წვდომა

• ფერის გარდა, არსებობს ნეფოტოგრაფიული ნიშნები.

ავტომატიზაცია

• კონტრასტის ტესტები CI/CD- ში ნიშნებისა და კომპონენტების მიხედვით.

16) ტოქსინების დანერგვა (ნოტაციის მაგალითი)

color.bg.base   = oklch(0.95 0.02 260)
color.fg.primary  = oklch(0.18 0.04 260)  # ≈7:1 color.fg.secondary = oklch(0.30 0.03 260)  # ≥4.5:1 color.border    = oklch(0.40 0.03 260)  # ≥3:1 color.accent    = oklch(0.65 0.12 230)  # проверить на обоих фонах

შენიშვნა: სავარაუდო მნიშვნელობები; საბოლოო შერჩეულია კონტრასტის გაანგარიშებით კონკრეტულ თემაში.

17) დოკუმენტაცია გუნდისთვის

სახელმძღვანელოებში მიუთითეთ: კონტრასტის მიზნები, სწორი/მცდარი წყვილების მაგალითები, ძირითადი კომპონენტების „fg × bg“ მატრიცა, მედია ფონების წესები და როგორ უნდა შეიცავდეს „მაღალი კონტრასტის“ რეჟიმს.
შეინარჩუნეთ ცოცხალი გვერდი „გამონაკლისები და მიზეზები“ (მაგალითად, 3). 8:1 ვიწრო შემთხვევაში დიდი ეკრანის სათაური).

მოკლე რეზიუმე

კონტრასტი არის გაზომილი პარამეტრი და არა გემოვნება. დაუსვით მიზნები (AA/AAA), გააკონტროლეთ ისინი ნიშნების საშუალებით (უკეთესია OKLCH- ში), შეამოწმეთ ავტომატურად CI და ვიზუალურად განლაგებულ მოდელებში, გაითვალისწინეთ მუქი/ნათელი თემები და ფერის დარღვევების მქონე ადამიანები. ეს უზრუნველყოფს კითხვას, ამცირებს შეცდომებს და ზრდის კონვერტაციას.