Контрастность по WCAG: что значит 4,5:1 и как это пройти
Что на самом деле требуют коэффициенты контрастности WCAG, почему серый текст постоянно проваливает проверку и как исправить пару цветов, не меняя палитру.
Серый текст на белом фоне. Дизайнеры его обожают, а проверки доступности он проваливает чаще всего остального в вебе. Возьмём #777777 на белом: коэффициент контрастности — 4,48:1, чуть-чуть не дотягивает до 4,5:1, которые требует WCAG AA. Сдвиньте на два шага темнее, до #767676, — и уже 4,54:1, проходит. Вот настолько тонкая грань. Проверка контрастности цветов сразу показывает, по какую сторону этой грани ваши цвета.
Что на самом деле измеряет коэффициент
Формула WCAG переводит каждый цвет в относительную яркость — то, насколько светлым его воспринимает глаз, — и делит большее значение на меньшее с небольшой константой. Шкала идёт от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом).
Есть неочевидный момент: глаз воспринимает цветовые каналы по-разному. Зелёный даёт около 71% воспринимаемой яркости, красный — 21%, синий — всего 7%. Поэтому чистый синий текст (#0000ff) на чёрном не проходит ничего, а чистый зелёный (#00ff00) на чёрном легко берёт AAA. Два «одинаково ярких» на глаз цвета в проверке контраста ведут себя совершенно по-разному.
Четыре числа, которые стоит запомнить
- 4,5:1 — AA для обычного текста. Базовый порог для основного текста.
- 3:1 — AA для крупного текста, а заодно для элементов интерфейса: рамок кнопок, иконок.
- 7:1 — AAA для обычного текста.
- 4,5:1 — AAA для крупного текста.
Крупный текст — это от 24px обычного начертания или от 18,66px полужирного. Заголовку в 32px достаточно 3:1, поэтому приглушённый цвет заголовка может быть в порядке, а тот же оттенок в абзаце — уже нарушение.
Именно на AA ссылаются законы: Европейский акт о доступности, вступивший в силу в июне 2025 года, и большинство рекомендаций по ADA в США. AAA — планка со звёздочкой. Хороша для длинного чтения, но с фирменными цветами достижима редко.
Где дизайн проваливается чаще всего
WebAIM каждый год автоматически проверяет миллион главных страниц, и низкоконтрастный текст — самая частая ошибка во всех выпусках отчёта: он встречается примерно на четырёх страницах из пяти. Типичные виновники:
- плейсхолдеры в формах — браузеры по умолчанию рисуют их светло-серым;
- текст поверх фотографий, где «фон» — это то, что случайно оказалось на снимке;
- оранжевые или бирюзовые кнопки с белой надписью (#ff6600 на белом даёт лишь около 2,9:1);
- серые ссылки в футере на чуть другом сером.
На ярком офисном мониторе всё это выглядит нормально. На телефоне под солнцем или глазами шестидесятилетнего человека — исчезает.
Как исправить пару цветов без редизайна
Новая палитра почти никогда не нужна. Оставьте оттенок, поменяйте светлоту: затемните текст на шаг-два или осветлите фон и проверяйте после каждого сдвига — коэффициент пересчитывается по мере ввода, так что это занимает секунды. Если фирменный цвет неприкосновенен, отдайте его крупным заголовкам и акцентам, где хватает 3:1, а для основного текста возьмите тёмный вариант.
И проверьте тёмную тему отдельно. Пара, которая проходит на белом, после инверсии может провалиться: яркость не переворачивается симметрично.
Вставьте два цвета в Проверку контрастности цветов — и через секунду будете знать, проходят ли они AA, AAA или ни то ни другое. Без регистрации, данные не покидают браузер.