Как пользоваться
- Укажите цвет текста (переднего плана) и цвет фона в формате HEX, rgb(), hsl() или другом формате CSS либо воспользуйтесь палитрами.
- Посмотрите коэффициент контрастности и результат проверки для каждого требования WCAG.
- Если требование не выполнено, выберите целевой уровень и примените предложенный цвет: оттенок останется прежним, изменится только светлота.
- Нажмите «Поменять местами», чтобы проверить обратное сочетание, например светлый текст на тёмной кнопке.
Как это работает
Коэффициент рассчитывается по определению WCAG 2.2: для каждого цвета вычисляется относительная яркость на основе его каналов sRGB, а затем более высокая яркость делится на более низкую после прибавления 0.05 к каждой. Значение находится в диапазоне от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом).
Проверяются следующие требования: критерий успеха 1.4.3 (AA) требует коэффициент 4.5:1 для обычного текста и 3:1 для крупного; критерий 1.4.6 (AAA) — 7:1 и 4.5:1; критерий 1.4.11 требует 3:1 для элементов интерфейса и значимой графики, например границ полей ввода и значков. Крупным считается текст размером не менее 24px обычного начертания или примерно 18.66px полужирного. WCAG не допускает округления вверх, поэтому значение 4.49:1 не проходит AA, хотя оно близко к порогу; коэффициент здесь усекается, а не округляется.
Рекомендация сохраняет оттенок и цветность текста в OKLCH и подбирает ближайшую светлоту — темнее или светлее, — которая соответствует целевому значению. Контрастность — лишь один из факторов читаемости: важны также жирность и размер шрифта, а также различия в цветовосприятии. WCAG 2.2 — актуальная рекомендация W3C, на которую ссылается большинство законов о доступности.
Примеры
Серый текст почти проходит проверку
Серый #777777 на белом фоне даёт коэффициент 4.48:1. Этого достаточно для крупного текста и элементов интерфейса, но недостаточно для обычного текста по уровню AA. Ближайший подходящий серый — примерно #767676, с коэффициентом 4.54:1.
Белый текст на фирменной кнопке
Белый текст на фоне #ff8800 даёт коэффициент около 2.4:1 — этого недостаточно даже для уровня 3:1, требуемого для крупного текста. Обычно для решения проблемы затемняют оранжевый фон или используют тёмный текст; рекомендация показывает, насколько тёмным должен быть цвет текста.
Проверка границы поля формы
Светло-серая граница #cccccc на белом фоне даёт коэффициент около 1.6:1. По критерию 1.4.11 граница, обозначающая поле ввода, должна иметь коэффициент 3:1, поэтому нужен цвет примерно #949494 или темнее.
Часто задаваемые вопросы
Какой коэффициент контрастности нужен для WCAG AA?
4.5:1 для обычного текста, 3:1 для крупного текста (24px или 18.66px полужирного начертания), а также 3:1 для элементов интерфейса и значимой графики. Для уровня AAA требуется 7:1 для текста и 4.5:1 для крупного текста.
Должен ли текст в логотипе или на отключённой кнопке проходить проверку?
Нет. WCAG делает исключение для текста в логотипах и названиях брендов, чисто декоративного текста и текста в неактивных (отключённых) элементах интерфейса.
Почему результат немного отличается от результата другого инструмента?
Некоторые инструменты округляют коэффициент до одного знака после запятой или округляют его вверх. WCAG сравнивает точное значение, поэтому этот инструмент усекает коэффициент до двух знаков после запятой. Небольшие расхождения также могут возникать из-за альфа-канала у введённых цветов.
А как насчёт нового метода оценки контрастности APCA?
APCA — это другой метод, предложенный для будущей версии WCAG. Он не входит в WCAG 2.2, по которой работает этот инструмент и на которую ссылаются действующие правила доступности.
Конфиденциальность
Цвета проверяются в браузере. Данные не загружаются и не сохраняются.