◐

Проверка контраста цветов

Коэффициент контраста и соответствие WCAG (AA/AAA) — для читаемого текста.

Текст

Фон

—

коэффициент контраста

обычный текст · ≥ 4.5

—

AAA

обычный текст · ≥ 7

—

AA крупный

от 18px жирный · ≥ 3

—

AAA крупный

крупный текст · ≥ 4.5

—

Большой заголовок

Обычный текст для проверки читаемости на выбранном фоне.

Что такое коэффициент контраста

Контраст показывает, насколько цвет текста отличается по яркости от фона. Он измеряется отношением от 1:1 (нет контраста) до 21:1 (чёрное на белом). Чем выше значение, тем легче читать текст — особенно людям со слабым зрением и на ярком солнце.

Нормы WCAG

AA — минимальный уровень доступности: контраст ≥ 4.5 для обычного текста и ≥ 3 для крупного (от 18px или 14px жирного);
AAA — повышенный уровень: ≥ 7 для обычного и ≥ 4.5 для крупного текста.

Для сайтов и приложений ориентируйтесь минимум на AA — это требование доступности во многих стандартах. Серый текст на белом фоне часто не проходит проверку, хотя выглядит «нормально».

Вопросы и ответы

Какой контраст считается достаточным? Для обычного текста — не ниже 4.5 (уровень AA), идеально 7 и выше (AAA).

Почему светло-серый текст плохо? У него низкий контраст с белым фоном — его тяжело читать на телефоне при ярком свете.

Считается ли в браузере? Да, все расчёты идут локально, цвета никуда не отправляются.