Контрастні інтерфейси та читаність

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: підбір'L'для досягнення 4. 5:1).
Системні налаштування: поважайте'prefers-contrast','forced-colors', 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 і візуально в макетах, враховуйте темну/світлу теми і людей з порушеннями колірного зору. Це гарантує читаність, знижує помилки і підвищує конверсію.