Контрасттык интерфейстер жана окуу жөндөмдүүлүгү

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 - кол менен орнотуу үчүн ыңгайлуу, бирок бир калыпта эмес.
Lab/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/default' ≥ 'bg/base' 3:1 (талаа чектери, карталар)
• `interactive/default` ↔ `bg/base` ≥ 4. 5:1 (шилтемелер/баскычтар)
• 'interactive/disabled' активдүү абалдарды туурабашы керек; контрастты азайтуу жана курсор/ARIA атрибуттарын колдонуу.

• теманын негизги жарык (L), андан кийин катмар/беттер үчүн 'Δ L' четтөөлөр ('bg/subtle', 'bg/elevated'),
• тесттерде минималдуу карама-каршы түгөйлөрдү жазыңыз.

5) Жарык жана караңгы темалар

Жарык тема: текст дээрлик кара (таза # 000 эмес, жылуу/муздак көлөкө), "жаркыраган" азайтуу үчүн бир аз түс ак фон.
Караңгы тема: таза # 000 алкагында качуу - L ≈ 0 менен терең графит/көмүр. 12–0. 16 жарык азайтат; ак текст L ≈ 0 чейин жумшартат. 9.
Эки темада бирдей карама-каршы максаттарды сактаңыз; түс басым караңгы алкагында окууга жөндөмдүүлүгүн жоготуп жол бербөө (көп учурда 'Δ L' жылышы жана каныккандыгын азайтуу керек).

6) сүрөттөр жана Videos боюнча текст

Overley (40-60% градиент/жарым тунук катмары) же тексттин астында плашкаларды колдонуу.
Жок дегенде 4. 5:1 текст жана жергиликтүү фон ортосунда.
Динамикалык видео үчүн - кадр жарыктыгын талдоо үчүн адаптивдик фон/overley (борбордук/жасалма аймактын үлгүсү).

7) Шарттар жана интерактивдүүлүк

Шилтемелер гана түс менен айырмаланышы керек: демейки баса белгилөө же hover/focus + контраст ≥ 3:1 кадимки текст менен.
Баскычтар: текст жана сөлөкөт ≥ 4. 5:1 куюп; 3:1 ≥ чөйрөгө толтуруу.
Каталар/ийгилик/эскертүү: түс таянган жок; иконаларды/тексттик кеңештерди кошуу; тексттин карама-каршылыгын камсыз кылуу, жок эле дегенде, 4. 5:1.

8) түс кабылдоо бузулган адамдар

• Deuteranopia/Protanopia (кызыл-жашыл зонасы): кошумча белгилери жок "кызыл vs жашыл" айкалышы качуу.
• Tritanopia: көк-сары жуп өзүнчө текшерүү.
• Формаларды жана графиктерди түшүнүктүү кылыңыз: тексттик белгилер, штрихтердин/маркерлердин ар кандай түрлөрү, куюу үлгүлөрү, сегменттерге кол тамгалар.

9) Типография жана фон

негизги текст Cegle: 14-16 PX минимум (Web), 16-18 PX мазмун зоналары үчүн.
Жол аралык интервал 1. 4–1. 6 жогорку карама-каршы алкагында окууга жөндөмдүүлүгүн жакшыртат.
Жетишсиз контрастта жука чиймелерден алыс болуңуз.
Түстүү фондун тексти: максаттуу мамилеге жетүү үчүн фондун каныккандыгын азайтыңыз жана/же жарык күчөтүңүз.

10) Диаграммалар, таблицалар, графиктер

Сызыктар/мамычалар ≥ 3:1 тор/фон.
Октун жана уламыштын кол тамгалары ≥ 4. 5:1.
Түстөн тышкары ар кандай формаларды/үлгүлөрдү колдонуңуз.

11) Динамикалык/адаптивдик контраст

Auto contrast: 4 жетүү үчүн (мисалы, OKLCH аркылуу: тандоо 'L' аркылуу, тандалган толтуруу үчүн тексттин карама-каршы түсүн эсептөө. 5:1).
Системалык орнотуулар: 'prefers-contrast', 'forced-colors', high-contrast OS режимдерин урматтоо.
Персоналдаштыруу: тиркемеде "Жогорку контрастты" орнотуу ('Δ L' күчөтүү, бренд акценттерин форма/иконалар аркылуу өз алдынча сактоо менен нейтралдуу болуп алмаштыруу).

12) Процесстер жана контролду автоматташтыруу

12. 1 дизайнерлер үчүн

Макеттердеги карама-каршылыкты текшериңиз (эки темада жана негизги фонунда).
компоненттери (title/primary/secondary/hint) менен "карама-каршы уячаларды" киргизүү.
Ар бир компонент үчүн жарактуу фон контексттерин документтештирүү.

12. 2 Иштеп чыгуучулар үчүн

Юнит-хелпери: токен-жубайлар үчүн тесттерде контраст жана ассерттерди эсептөө функциясы.
Контрасттык метриканы текшерүү менен визуалдык снапшоттор (скрин-рендер + сэмплдер боюнча L1/L2 эсептөө).
Linters Style: "чийки" түстөгү тыюу, токендер аркылуу гана.

12. 3 CI/CD

Темаларда жана шарттарда 'fg/bg' бардык түгөйлөрүн текшерүү.
Компонентти, вариантты, теманы жана иш жүзүндөгү маанисин көрсөтүү менен бузуулар боюнча отчет (мисалы, 3. 9:1 талап менен 4. 5:1).

13) iGaming өзгөчөлүктөрү (кошумча)

Жаркыраган жарнамалык баннерлер жана турнирлердин карталары көп учурда текстти "жешет". плашка/overley жана арткы каныгуу чектөө талап кылынат.
Жоопкерчиликтүү билдирмелердин системалык элементтери (18 +, лимиттер, тобокелдиктер) - контраст боюнча AAA.
Лидерлердин таблицаларында/коэффициенттеринде: сандар жана белгилер "+/-" ≥ 4. 5:1, утуштарды жарык - түстүү гана эмес (иконалар/белгилер).

14) Антипаттерндер

мамлекеттин айырмасы үчүн гана түс таянуу.
Контрастты эсептебей түстүү фонунда жука боз шрифттер.
Dark Mode "Dark-On-Dark", промо зоналарында "жарык-на-жарк".
Тексттин фонунда майда-чүйдөсүнө чейин/ызы-чуу жок.

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де автоматтык түрдө жана макеттерде визуалдык түрдө текшериңиз, караңгы/жарык темаларды жана түстүү көрүү мүмкүнчүлүгү чектелген адамдарды эске алыңыз. Бул окууга кепилдик берет, каталарды азайтат жана конверсияны жогорулатат.