Проверка контраста цветов (WCAG)

Контраст между текстом и фоном влияет на читаемость и доступность сайта, а удобство — это ещё и поведенческий фактор. Выберите цвет текста и фона — посчитаем коэффициент контрастности и проверим соответствие стандарту WCAG (уровни AA и AAA). Всё считается в браузере.

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

Коэффициент контрастности — это отношение яркости текста к яркости фона, от 1:1 (нет контраста) до 21:1 (чёрное на белом). Стандарт доступности WCAG задаёт пороги: AA требует не меньше 4.5:1 для обычного текста и 3:1 для крупного (от 18px жирного или 24px обычного), AAA — 7:1 и 4.5:1 соответственно. Чем выше контраст, тем легче читать текст всем, включая людей со слабым зрением и при ярком солнце на экране телефона.

Почему это важно для сайта

Низкий контраст — частая причина, по которой посетители не дочитывают и уходят, а это ухудшает поведенческие факторы. Доступность всё чаще учитывается и поисковиками как часть качества страницы. Минимальная планка — уровень AA: на неё и ориентируйтесь для основного текста.

Связанные инструменты

Подобрать цвета поможет палитра и пипетка цвета и генератор градиентов. Оценить удобство и скорость страницы целиком — анализ сайта, а про удобство и поведенческие — статья как улучшить поведенческие факторы.

Частые вопросы

Что такое коэффициент контрастности?
Это отношение яркости текста к яркости фона — от 1:1 (нет контраста) до 21:1 (чёрное на белом). Чем выше, тем легче читать текст, особенно людям со слабым зрением и при ярком свете.
Какой контраст нужен по WCAG?
Уровень AA требует не меньше 4.5:1 для обычного текста и 3:1 для крупного (от 18px жирного или 24px обычного). Уровень AAA — 7:1 и 4.5:1. Минимальная планка для основного текста — AA.
Зачем контраст важен для сайта?
Низкий контраст ухудшает читаемость, посетители быстрее уходят — страдают поведенческие факторы. Доступность всё чаще учитывается как часть качества страницы, поэтому держите основной текст хотя бы на уровне AA.