Цветовой контраст WCAG: формула, требования и инструменты

Що таке коефіцієнт контрасту

Контраст у WCAG вимірюється як співвідношення відносної яскравості (relative luminance) двох кольорів. Формула задана у специфікації:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

де L1 — яскравість світлішого кольору,
   L2 — яскравість темнішого.

Діапазон: від 1:1 (однакові кольори) до 21:1 (чорний на білому).

Це не суб'єктивна оцінка «світліший/темніший», а математичне співвідношення. Тому два кольори що візуально здаються близькими можуть давати 4.5:1, а два «контрастні» — лише 2.1:1.

Вимоги WCAG 2.1 / 2.2

Критерії: 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced), 1.4.11 Non-text Contrast, 2.4.11 Focus Not Obscured (WCAG 2.2).

7 поширених помилок контрасту

1. 1Сірий текст на білому (#999 / #fff) — контраст 2.85:1. Виглядає «легко», але провалює WCAG AA. Заміна на #767676 дає рівно 4.54:1.
2. 2Placeholder text занадто блідий — більшість UI-фреймворків ставить placeholder #ccc на #fff (1.6:1). За WCAG 2.1, якщо placeholder містить інформацію — він має задовольняти 4.5:1.
3. 3Текст на градієнті або фото — контраст потрібно перевіряти в найсвітлішій точці фону. Часто рятує темне напівпрозоре оверлей (rgba(0,0,0,0.4)) або text-shadow.
4. 4Disabled-стани кнопок — за WCAG disabled-елементи виключаються з вимог 1.4.3. Але якщо ваш «disabled» виглядає так, що користувач намагається натиснути — це accessibility проблема UX-рівня.
5. 5Колір як єдиний носій інформації — «червоне = помилка, зелене = успіх». Не працює для дальтоніків (8% чоловіків). Додавайте іконку, текст або pattern.
6. 6Іконки без бордюру — світло-сіра іконка search без контейнера може провалити 1.4.11. Або підвищіть контраст іконки, або дайте їй фон-плашку 3:1.
7. 7Темна тема забута — якщо у вас є light/dark switch, контраст потрібно перевіряти окремо для кожного режиму. Часто dark mode «з коробки» інвертується нерівномірно.

Інструменти для перевірки

• Chrome DevTools — Inspect element, на вкладці Styles натисніть на color → відкриється Contrast ratio з оцінкою AA/AAA.
• WebAIM Contrast Checker — онлайн-калькулятор з двома полями, миттєвий результат і всі чотири WCAG-перевірки.
• InclusiveWeb Contrast Checker — наш безкоштовний інструмент із підтримкою HEX/RGB/HSL, перевірки для текстових і нетекстових елементів за WCAG 2.1/2.2.
• axe DevTools / Lighthouse — сканують сторінку повністю і знаходять усі контрастні провали разом з пораженими селекторами.
• Figma plugins (Stark, A11y) — перевірка контрасту прямо у дизайні до того, як код буде написаний.

Як побудувати accessible-палітру з нуля

Замість того щоб ловити порушення по сторінках, легше відразу визначити дизайн-токени з гарантованим контрастом:

1. 1Виберіть текстові токени — text-primary (4.5:1+ на фоні), text-secondary (4.5:1+ на фоні), text-muted (3:1+ для великого тексту або декоративного).
2. 2Перевірте brand-колір — основний колір бренду (для кнопок, посилань, акцентів) повинен давати 4.5:1 з фоном для текстових ситуацій. Якщо ні — створіть «AA-варіант» (трохи темніший для тексту).
3. 3Документуйте у дизайн-системі — кожен токен має пояснення: де його можна використовувати, де ні. «text-muted ❌ не для важливої інформації».
4. 4Інтегруйте перевірки у CI — pa11y або axe-core у GitHub Actions: PR з контрастним провалом автоматично не зливаються у main.