Проверка контрастности цветов по WCAG

Требования WCAG к контрастности

Руководство по доступности веб-контента (WCAG) задаёт минимальные коэффициенты контрастности, чтобы текст оставался читаемым для людей со слабым зрением, нарушениями цветовосприятия или с телефоном на ярком солнце. Коэффициенты идут от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом).

AA, обычный текст

Не меньше 4.5:1 (критерий успеха 1.4.3). Уровень, которого требует большинство законов и политик доступности, включая Европейский акт о доступности (European Accessibility Act) и разъяснения ADA в США.

AA, крупный текст

Не меньше 3:1. Крупным считается текст от 24 px (18 pt), а полужирный — от 18.66 px (14 pt).

AAA, обычный текст

Не меньше 7:1 (критерий успеха 1.4.6). Повышенный уровень, к которому стоит стремиться для длинных текстов.

AAA, крупный текст

Не меньше 4.5:1.

Контраст нетекстовых элементов

Не меньше 3:1 (критерий успеха 1.4.11) для иконок, рамок полей ввода, индикаторов фокуса, линий графиков и тех частей элемента управления, которые нужно видеть, чтобы им пользоваться.

Как вычисляется коэффициент контрастности

Каждый цвет переводится в относительную яркость: каналы sRGB линеаризуются (снимается гамма-кривая) и берутся с весами 0.2126 для красного, 0.7152 для зелёного и 0.0722 для синего, потому что глаз гораздо чувствительнее к зелёному. Затем коэффициент равен (L1 + 0.05) / (L2 + 0.05), где L1 — более светлый цвет. Например, #777777 на белом даёт 4.48:1, чуть не дотягивая до AA, а #767676 достигает 4.54:1 и проходит.

Коэффициент никогда не округляется вверх до порога: WCAG прямо указывает, что 4.49:1 не соответствует 4.5:1. Полупрозрачные цвета сначала смешиваются так, как их рисует браузер: текст поверх фона, а полупрозрачный фон поверх белого.

Как исправить непрошедший цвет

Предложения сохраняют тон и насыщенность цвета текста и меняют только его светлоту в OKLCH — перцептивном цветовом пространстве, которое теперь поддерживает CSS. Светлота шагами уменьшается и увеличивается, пока коэффициент не пройдёт, и выбирается вариант, более близкий к исходному. Обычно результат — тот же фирменный цвет, чуть глубже или светлее, а не скачок к чёрному. Если ни один оттенок этого тона не достигает цели на вашем фоне, инструмент так и скажет: менять нужно фон.

Чтобы перебрать другие варианты самостоятельно, откройте цвет в конвертере цветов и пройдитесь по его светлым и тёмным оттенкам или возьмите цвета-кандидаты с фотографии генератором цветовой палитры.

Частые ошибки с контрастностью

• Плейсхолдеры и текст, который выглядит неактивным. Светло-серый текст-подсказка — тоже текст, и если он нужен пользователю, он должен давать 4.5:1. Действительно отключённые элементы управления освобождены от требования, а всё, что лишь выглядит отключённым, — нет.
• Текст на изображениях и градиентах. Проверяйте самую светлую часть изображения под текстом, а не среднюю. Надёжное решение — тёмная подложка или сплошная панель под текстом.
• Фирменные цвета для текста. Яркий оранжевый или бирюзовый может выглядеть смело и при этом не проходить на белом. Используйте предложение, чтобы найти более глубокий вариант того же тона для текста, а яркий оставьте для крупных заголовков или декора.
• Индикаторы фокуса и рамки полей. Светло-серая рамка в 1 px вокруг текстового поля часто не проходит правило 3:1 для нетекстовых элементов, и людям со слабым зрением трудно найти поле.
• Тёмная тема. Пара, проходящая в светлой теме, ничего не говорит о тёмной. Проверяйте обе темы, а кнопка обмена позволяет быстро взглянуть на перевёрнутую пару.

APCA и WCAG 3

Под результатами WCAG 2 также отображается значение контраста светлоты APCA, обозначаемое Lc. APCA — метод расчёта контрастности, предложенный для будущего WCAG 3. Он учитывает толщину шрифта и то, что светлому тексту на тёмном фоне нужен иной контраст, чем тёмному на светлом, — формула WCAG 2 это игнорирует; поэтому и знак значения меняется при обмене цветов. Ориентировочно Lc 75 подходит для основного текста, Lc 60 — для прочего читаемого текста, Lc 45 — для крупных заголовков. WCAG 3 пока черновик, так что считайте APCA дополнительной информацией: аудиты и законы по-прежнему ссылаются на WCAG 2.x.