Відзначимо: коли користувач зі зниженим зором не може прочитати текст на сайті через недостатній контраст — це не просто поганий UX, а пряма загроза судових позовів. WCAG 2.1 AA став де-факто стандартом (див. Web Content Accessibility Guidelines): мінімальне співвідношення контрасту 4.5:1 для звичайного тексту та 3:1 для великого (від 18pt regular або 14pt bold). Контрастність WCAG — одна з найчастіших проблем, яку ми виправляємо. Розмір шрифту та доступність нерозривно пов'язані: великий текст допускає менший контраст. Ми провели понад 50 аудитів доступності та знаємо, як привести контрастність і шрифти до норми без переписування всього CSS. Економія часу на ручних перевірках сягає 70%, а вартість послуги окупається зниженням ризику значних штрафів. Запобігання судовим позовам також дає значну економію.
Проблеми контрастності та шрифтів
Типова помилка — використання одного акцентного кольору для тексту на всіх фонах. Навіть дизайнери великих брендів допускають контраст 2.8:1 для підказок у полях введення або 2.1:1 для неактивних кнопок. Особливо підступні градієнти, напівпрозорі підкладки та hover-стани — автотести часто їх пропускають.
Для перевірки комбінуємо автоматичні (Pa11y, Axe) та ручні методи. Автоматизація ловить до 80% помилок, але решта 20% потребують людського ока. Порівняємо ключові підходи:
| Метод | Охоплення | Час на сторінку | Пропуски |
|---|---|---|---|
| Авто (Pa11y з WCAG2AA) | 70–80% | 2–5 секунд | Градієнти, текст на зображеннях, анімації |
| Ручний (Axe + візуальний огляд) | 95%+ | 10–15 хвилин | Рідкісні стани, складні фони |
Які інструменти для перевірки контрастності найефективніші?
Для швидкого заміру пари кольорів підходить WebAIM Contrast Checker — онлайн-інструмент, який показує співвідношення та рівень AA/AAA. Для масового аудиту використовуємо Pa11y з кастомним конфігом. У CI-пайплайн вбудовуємо перевірку кожної сторінки — якщо хоча б одна не проходить, збірка падає.
npx wcag-contrast "#333333" "#ffffff" # 12.63:1 — відмінно Зверніть увагу: перевірка контрасту онлайн має враховувати не лише статичні значення, а й стани елементів. Для цього ми використовуємо Axe Core з налаштуваннями під WCAG 2.1 AA.
Як ми досягаємо відповідності WCAG AA за 5 днів
Процес складається з п'яти кроків:
- Аудит — прогін усіх сторінок через Pa11y та Axe, візуальна перевірка складних станів.
- Проєктування — створення семантичних CSS-змінних із гарантією контрасту.
- Реалізація — заміна кольорів на змінні, корекція шрифтів та відступів.
- Тестування — повторний прогін автотестів та мануальна верифікація ключових екранів.
- Деплой та навчання — інтеграція CI-перевірки, передача документації та конфігів.
Цей підхід у 4 рази швидший за хаотичне виправлення кожного елемента вручну. Наприклад, на проєкті інтернет-магазину автотест пропустив картку з контрастом 4.1:1 на сірому фоні — ми затемнили колір тексту та задокументували новий токен. У результаті контраст став 4.6:1, а вся дизайн-система оновилася за один день.
Дизайн-система та CSS-змінні
Що робити, якщо контраст не проходить у дизайн-системі?
Типова ситуація: токен --color-text-muted дає контраст 4.2:1 замість 4.5:1. Рішення — або затемнити колір, або збільшити розмір шрифту до великого. Ми рекомендуємо перше: змінювати колір в одному місці, а не розмір на всіх компонентах.
Приклад виправлення:
:root { --color-text-primary: #1a1a1a; /* 17.1:1 AAA */ --color-text-secondary: #595959; /* 7.0:1 AA */ --color-text-muted: #767676; /* 4.54:1 AA */ --color-accent: #005EA2; /* 5.9:1 AA */ } Було #808080 (4.0:1) → стало #767676 (4.54:1). Зміна яскравості на 10% вирішила проблему.
Автоматизація перевірок у CI
Щоб контрастність не ламалася при кожному коміті, підключаємо Pa11y у GitHub Actions.
// .pa11yrc.json { "standard": "WCAG2AA", "runners": ["axe", "htmlcs"], "ignore": ["color-contrast"] } Pipeline зупиняє збірку при падінні хоча б однієї перевірки — дефект не потрапить у продакшен.
Результати та гарантії
Системне впровадження WCAG окупається за 3–6 місяців за рахунок економії на перевірках та відсутності судових позовів. Порівняємо підходи:
| Підхід | Вартість впровадження | Ризик штрафів | Час на підтримку |
|---|---|---|---|
| Хаотичні правки | Низька | Високий | Високий |
| Системний аудит + CI | Середня | Мінімальний | Низький |
Строки: від 3 до 5 робочих днів на проєкт середнього розміру. Конкретні строки уточнюємо після знайомства з кодом.
Відзначимо: Що входить у нашу роботу:
- Повний аудит контрастності всіх станів UI (звичайний, hover, focus, disabled) по 2–3 різних фонах.
- Аудит розмірів шрифтів та міжрядкових інтервалів на desktop та mobile.
- Створення або доопрацювання дизайн-системи (CSS-змінні, документація).
- Інтеграція Pa11y у CI вашого проєкту.
- Навчання команди: як перевіряти контрастність у Figma та DevTools.
- Гарантія: якщо після впровадження наших токенів нова сторінка не проходить AA — безкоштовно виправляємо.
Зв'яжіться з нами для аудиту вашого проєкту. Замовте безкоштовну перевірку 5 сторінок — переконайтеся в якості нашої роботи.