Проверка контраста WCAG
Проверьте доступность сочетания цветов текста и фона.
- Мгновенно
- Бесплатно
- Приватно (обработка локально)
- Без регистрации
Цвета, которые читают все, — проверка в два клика
Почти каждый двенадцатый человек плохо различает некоторые контрасты. WCAG (Web Content Accessibility Guidelines) задают минимальные соотношения между текстом и фоном; этот инструмент вычисляет их в реальном времени по официальной формуле относительной яркости и показывает живой предпросмотр вашей комбинации.
-
Выберите два цвета
В палитре или вставив шестнадцатеричный код (#rrggbb или #rgb).
-
Читайте коэффициент
От 1:1 до 21:1, с четырьмя вердиктами AA/AAA для обычного и крупного текста.
-
Скорректируйте при необходимости
Меняйте светлоту одного из цветов до прохождения, ориентируясь на предпросмотр.
Пороги WCAG в одной таблице
| Уровень | Обычный текст | Крупный текст |
|---|---|---|
| AA (минимум) | 4,5 : 1 | 3 : 1 |
| AAA (усиленный) | 7 : 1 | 4,5 : 1 |
| Компоненты интерфейса (2.1) | 3 : 1 | 3 : 1 |
Контраст нужно проверять для каждой пары «текст/фон» интерфейса — не забудьте о состояниях: ссылки при наведении, отключённые кнопки, плейсхолдеры и тёмная тема.
Частые вопросы
Что такое коэффициент контрастности?
Это отношение яркости более светлого цвета к более тёмному — от 1:1 (одинаковые) до 21:1 (чёрный на белом). WCAG использует его, чтобы гарантировать читаемость текста для всех, включая слабовидящих.
Какие пороги нужно достичь?
Уровень AA: 4,5:1 для обычного текста, 3:1 для крупного. Уровень AAA строже: 7:1 и 4,5:1 соответственно. AA — юридический минимум для государственных сервисов во многих странах.
Что считается «крупным текстом»?
По WCAG: не менее 18 pt (24 px) обычного начертания или 14 pt (18,5 px) жирного. Крупные заголовки допускают меньший контраст, чем основной текст.
Применяется ли контраст к нетекстовым элементам?
Да: начиная с WCAG 2.1, компоненты интерфейса (рамки полей, информативные иконки, состояния фокуса) должны достигать 3:1 с соседними цветами (критерий 1.4.11).
Коэффициент недостаточен: как исправить?
Затемните текст или осветлите фон (в тёмной теме — наоборот). Часто хватает пары шагов светлоты — сохраняйте оттенок и меняйте только светлоту, чтобы не разрушить палитру.