CSS Бесплатно, без регистрации

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

Выберите цвет текста и фона — инструмент посчитает коэффициент контраста по WCAG, покажет, проходит ли пара уровни AA и AAA для обычного и крупного текста и элементов интерфейса, и отрисует пример: текст, кнопку и иконку.

Результат

Готовый CSS-код

.text {
  color: #2563eb;
  background-color: #ffffff;
}
/* contrast 5.17:1 — AA ✓ AAA ✗ */

Как пользоваться

Выберите цвет текста и цвет фона палитрой или введите HEX-значение, например #2563eb или #fff.
Прочитайте коэффициент контраста и результаты AA / AAA: зелёный — порог пройден, красный — не пройден.
Посмотрите пример: обычный и крупный текст, кнопка и иконка на вашем фоне. Если пара не проходит, нажмите «Подобрать» — инструмент изменит светлоту цвета текста, пока контраст не достигнет 4.5:1.
Кнопка «Поменять» проверит обратную пару, а затем скопируйте готовое правило .text с комментарием о результате.

Как это работает

Как считается контраст

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

L = 0.2126 * R + 0.7152 * G + 0.0722 * B
ratio = (L1 + 0.05) / (L2 + 0.05)   /* L1 — более светлый цвет */

AA, AAA и пороги

Уровень AA требует 4.5:1 для обычного текста и 3:1 для крупного (от 24px, а для жирного — от 18.66px). На уровне AAA это 7:1 и 4.5:1. Компонентам интерфейса и графике — границам полей, иконкам, линиям диаграмм — нужно 3:1 по критерию WCAG 1.4.11 Non-text Contrast. Для большинства сайтов реалистичная цель — AA.

WCAG 2.2, APCA и WCAG 3

WCAG 2.2 — действующий стандарт W3C, а критерии контраста (1.4.3, 1.4.6, 1.4.11) в нём те же, что в WCAG 2.1. WCAG 3.0 пока остаётся рабочим черновиком, а алгоритм APCA, который обсуждают для него, не входит ни в один опубликованный стандарт. Аудиты и требования законов по-прежнему опираются на коэффициент контраста WCAG 2 — именно его считает этот инструмент.

Как исправить неподходящую пару

Сделайте текст темнее или фон светлее (в тёмной теме — наоборот). Кнопка «Подобрать» делает это в HSL: сохраняет оттенок и насыщенность и сдвигает светлоту к ближайшему значению с контрастом 4.5:1. В современном CSS канал L в oklch() меняет светлоту равномернее, чем HSL, поэтому он удобен как основа для доступных палитр.

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

Какой контраст нужен для основного текста?

Не меньше 4.5:1 для AA и 7:1 для AAA. Для крупного текста достаточно 3:1 на AA и 4.5:1 на AAA. Для мелкого или тонкого шрифта берите запас побольше.

Какой текст считается крупным?

Обычного начертания — от 18pt (24px), жирного — от 14pt (примерно 18.66px). Всё, что меньше, считается обычным текстом.

Должны ли проходить логотипы, неактивные кнопки и плейсхолдеры?

Логотипы, декоративные элементы и неактивные (disabled) компоненты исключены из требований. Плейсхолдер — это текст, который читают, поэтому ему тоже нужно 4.5:1.

Можно ли проверить текст на градиенте, фото или полупрозрачном цвете?

Инструмент сравнивает два сплошных цвета. Для полупрозрачного цвета сначала найдите итоговый цвет после смешивания с фоном. Для градиента или фото проверьте место с самым низким контрастом либо подложите под текст сплошной или затемнённый слой.

Эта тема в курсе HTML и CSS

Другие CSS-инструменты