DevToolPal
RU

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

Проверьте коэффициент контраста WCAG 2.x для цвета текста и фона: результат AA и AAA для обычного и крупного текста и интерфейса, живой просмотр и ближайший подходящий цвет.

Работает локально, без загрузки на сервер

Цвета

Цвет текста
Цвет фона

Полупрозрачные цвета сначала смешиваются: текст поверх фона, фон поверх белого.

Просмотр

Крупный текст

Основной текст должен легко читаться всеми, в том числе людьми со слабым зрением или при тусклом экране.

Кнопка

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

—

Ближайшие подходящие цвета

Что делает инструмент

Проверка контраста показывает, хорошо ли читается цвет текста на цвете фона по руководству WCAG 2.x (Web Content Accessibility Guidelines). Введите для текста и фона любой CSS-цвет — HEX, rgb(), hsl(), название цвета или полупрозрачный цвет — и получите коэффициент контраста, результат по каждому критерию AA и AAA и живой просмотр. Если пара не проходит, инструмент предложит ближайшие подходящие цвета текста и фона того же тона. Всё работает в вашем браузере.

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

  1. Введите или выберите Цвет текста и Цвет фона. Поменять меняет их местами.
  2. Посмотрите Коэффициент контраста и список результатов для обычного текста, крупного текста и элементов интерфейса.
  3. Если уровень не пройден, загляните в Ближайшие подходящие цвета: у каждого предложения есть новый цвет, его коэффициент, кнопка копирования и Применить.
  4. Включите APCA, чтобы увидеть ещё и контраст светлоты (Lc) из черновика WCAG 3.

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

Пример

#767676 on #ffffff  →  4.54:1  passes AA normal text
#777777 on #ffffff  →  4.47:1  fails AA normal text, passes AA large text
#000000 on #ffffff  →  21:1    the maximum

Как считается коэффициент

Относительная яркость каждого цвета вычисляется по каналам sRGB (после линеаризации с весами 21 % красного, 72 % зелёного и 7 % синего). Коэффициент равен (светлее + 0,05) / (темнее + 0,05) и меняется от 1:1 для одинаковых цветов до 21:1 для чёрного на белом. Важна только светлота, а не тон: чистый красный на чистом зелёном выглядит ярко, но даёт лишь около 1,3:1.

Предложения меняют только светлоту цвета (в HSL) и выбирают направление — темнее или светлее, — где изменение меньше. Иногда ни один оттенок не подходит: на среднем сером фоне ни один цвет текста не достигает 7:1.

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

› Какой контраст нужен?

Уровень AA в WCAG 2.x требует не менее 4,5:1 для обычного текста и 3:1 для крупного текста и элементов интерфейса — рамок полей, иконок, контуров фокуса. Уровень AAA требует 7:1 для обычного и 4,5:1 для крупного текста. Большинство законов и правил ссылаются на уровень AA.

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

Текст от 24px (18pt) обычного начертания или от 18,66px (14pt) жирного. Всё, что меньше, — обычный текст, и ему нужен более высокий коэффициент.

› Почему 4,49:1 не проходит?

Пороги WCAG точные: коэффициент 4,499 не достигает 4,5. Поэтому инструмент отбрасывает знаки при показе, а не округляет вверх, и решает по точному значению.

› Что такое APCA?

APCA (Accessible Perceptual Contrast Algorithm) — метод расчёта контраста, предложенный для черновика WCAG 3. Он даёт значение контраста светлоты Lc, зависящее от того, какой цвет — текст, и лучше подходит для тёмной темы. Это ещё не нормативный стандарт, поэтому здесь он показан только как дополнительный ориентир.