Проверка контраста
Выберите цвет текста и цвет фона и узнайте точный коэффициент контрастности WCAG, а также проходит ли он по уровню AA или AAA.
Предпросмотр крупного текста (18pt+)
Предпросмотр обычного текста, размер, который используется для большей части текста.
Что означают значки
WCAG 2.1 требует коэффициент 4.5:1 для обычного текста и 3:1 для крупного текста (18pt+ или полужирный от 14pt) для соответствия уровню AA. AAA строже: 7:1 для обычного текста, 4.5:1 для крупного.
Как это работает
Соотношение вычисляется по реальной формуле относительной яркости WCAG, а не приблизительно. Каждый канал делится на 255, затем линейно преобразуется, чтобы убрать гамма-кривую sRGB, а линейные каналы взвешиваются с коэффициентами 0.2126 для красного, 0.7152 для зелёного и 0.0722 для синего — это отражает, насколько каждый цвет вносит вклад в воспринимаемую яркость. Коэффициент контрастности — это (светлее + 0.05) / (темнее + 0.05), от 1:1 для одинаковых цветов до 21:1 для чёрного на белом.
У «крупного текста» есть точное определение, которое часто цитируют неверно: 18pt (примерно 24px) обычного начертания или 14pt (примерно 18.7px) полужирного. Поэтому пара цветов с коэффициентом 3.2:1 может полностью подходить для заголовка и не проходить для основного текста. Формула симметрична: замена местами переднего плана и фона никогда не меняет коэффициент, поэтому кнопка смены нужна только для предпросмотра. Одно честное ограничение: коэффициент измеряет только разницу яркости, поэтому красный на зелёном теоретически может пройти 4.5:1 и всё равно быть трудночитаемым для человека с нарушением цветовосприятия.
Оба цвета проходят через эти формулы прямо здесь, в JavaScript страницы, при каждом изменении. Ни одно значение цвета никуда не отправляется — это видно во вкладке «Сеть», пока вы перемещаете選 цвета.
Частые вопросы
В чём разница между AA и AAA?
AA — базовый уровень, к которому стремится большинство сайтов: 4.5:1 для обычного текста, 3:1 для крупного текста (18pt и больше, или полужирный от 14pt). AAA строже и рассчитан на контент для пользователей со слабым зрением: 7:1 для обычного текста, 4.5:1 для крупного.
Это проверяет изображения или только сплошные цвета?
Только два сплошных цвета — текст на фоне. Для текста на фото или градиенте проверяйте контраст относительно самых тёмных и самых светлых участков, на которые он может попасть.
Это та же формула, что используют браузеры и аудиты?
Да. Это стандартная формула относительной яркости и коэффициента контрастности WCAG 2.1 — та же, что используют Lighthouse и axe.
Из блога: Проверка контрастности WCAG: практическое руководство