Қарама-қарсы интерфейстер және оқылушылық

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) Суреттер мен бейнелердегі мәтін

Оверлей (градиент/мөлдір қабат 40-60%) немесе мәтін астындағы плашкаларды пайдаланыңыз.
Кемінде 4 бекітіңіз. 5:1 плашканың мәтіні мен жергілікті фонының арасында.
Динамикалық бейне үшін - кадр жарықтығын талдау бойынша бейімделген фон/оверлей (орталық/жалған аумақтың сэмплингі).

7) Жай-күй және интерактивтілік

Сілтемелер тек түсімен ғана ерекшеленбеуі керек: әдепкі астын сызу немесе әдеттегі мәтіні бар hover/focus + 3:1 ≥ қарама-қарсылық.
Түймешіктер: мәтін және ≥ 4. 5:1 құюға; қоршауға 3:1 ≥ құю.
Қателер/сәттілік/ескертулер: түске сүйенбеңіз; иконалар/мәтіндік кеңестер қосыңыз; мәтіннің кем дегенде 4-ке қарама-қайшылығын қамтамасыз етіңіз. 5:1.

8) Түс қабылдауы бұзылған адамдар

• Deuteranopia/Protanopia (қызыл-жасыл аймақ): қосымша белгілерсіз «қызыл vs жасыл» комбинацияларынан аулақ болыңыз.
• Tritanopia: көк-сары жұптары бөлек тексеріледі.
• Пішіндер мен графиктерді түсінікті етіңіз: мәтіндік белгілер, штрих/маркерлердің әртүрлі түрлері, бояу үлгілері, сегменттердің қолтаңбалары.

9) Типографика және фон

Негізгі мәтін кеглі: 14-16 px минимум (web), контенттік аймақтар үшін 16-18 px.
Жоларалық интервал 1. 4–1. 6 жоғары контрасты фонында оқылуды жақсартады.
Жеткіліксіз контрастағы жұқа сызбаларды болдырмаңыз.
Түсті фондағы мәтін: мақсатты қатынасқа шығу үшін фонның қанықтығын азайтыңыз және/немесе жарықтығын ұлғайтыңыз.

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

Тор/аяға ≥ 3:1 сызықтар/бағандар.
Біліктер мен аңыздардың қолдары ≥ 4. 5:1.
Түсінен басқа көрінетін пішіндерді/үлгілерді пайдаланыңыз.

11) Динамикалық/бейімделу контраст

Auto contrast: таңдалған құйманың мәтіннің қарама-қарсы түсін есептеңіз (мысалы, OKLCH: 4-ке жету үшін 'L' таңдауы арқылы). 5:1).
Жүйелік баптаулар: 'prefers-contrast', 'forced-colors', OS high-contrast режимдерін құрметтеңіз.
Дербестендіру: қосымшада «Жоғары контраст» күйін келтіру ('Δ L' күшейту, брендтік акценттерді пішін/иконалар арқылы фирмалық сақтаумен неғұрлым бейтараптыларға ауыстыру).

12) Бақылау процестері және автоматтандыру

12. 1 Дизайнерлер үшін

Орналасулардағы қарама-қайшылықты (екі тақырып пен кілт фонында) тексеріңіз.
Құрамдастарға «қарама-қарсы слоттарды» енгізіңіз (title/primary/secondary/hint).
Әрбір компонент үшін жарамды өңдік мәтінмәндерді құжаттаңыз.

12. 2 Әзірлеушілер үшін

Юнит-хелперлер: токен-жұптарға арналған тесттерде контраст пен ассертты есептеу функциясы.
Қарама-қарсы метриктерді тексерумен визуалды снапшоттар (скрин-рендер + сэмплдар бойынша 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-да автоматты түрде және макеттерде визуалды тексеріңіз, қараңғы/ашық тақырыптарды және түсті көру қабілеті бұзылған адамдарды ескеріңіз. Бұл оқылуға кепілдік береді, қателерді азайтады және конверсияны арттырады.