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

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

Как работает Проверка контраста

Этот инструмент вычисляет коэффициент контраста WCAG между двумя цветами и показывает, соответствует ли пара уровню AA или AAA для обычного текста, крупного текста и нетекстовых элементов интерфейса. Все вычисления выполняются локально в вашем браузере; введённые цвета никогда не загружаются.

Автор: Bastien Sulyan

Проверка контраста: пошаговая инструкция

Введите или выберите цвет переднего плана (текста).
Введите или выберите цвет фона.
Прочитайте коэффициент контраста и значки AA/AAA для обычного текста, крупного текста и нетекстовых элементов интерфейса.
Используйте «Поменять местами цвета», чтобы проверить пару в обратную сторону.

Частые сценарии использования

Проверка основного фирменного цвета на фоне белого или чёрного перед выпуском компонента кнопки.
Проверка того, что приглушённый серый основной текст всё ещё проходит уровень AA на светлом фоне карточки.
Подтверждение того, что цвет ссылки внутри абзаца достигает порога 4,5:1 для обычного текста.
Проверка того, проходит ли крупный заголовок с более лёгким начертанием сниженный порог 3:1 для крупного текста.

Часто задаваемые вопросы

Отправляет ли этот инструмент мои цвета на сервер?

Нет, вычисления полностью происходят в вашем браузере на JavaScript; ничего из введённого не загружается.

Какой коэффициент контраста нужен для AA или AAA?

WCAG 2.x требует 4,5:1 для AA обычного текста, 7:1 для AAA обычного текста, 3:1 для AA крупного текста и 4,5:1 для AAA крупного текста.

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

Не менее 24px (18pt) обычной насыщенности или примерно 18,7px (14pt) жирным; всё меньшее использует пороги для обычного текста.

Почему при обмене цветов местами коэффициент не меняется?

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

Гарантирует ли прохождение уровня AA доступность моего дизайна?

Нет. Контраст это лишь один из множества критериев успеха WCAG. Выбор цвета для людей с нарушениями цветового восприятия, видимость фокуса, изменение размера текста и навигация с клавиатуры это отдельные проверки; симулятор дальтонизма на этом сайте покрывает одну из них.

Это официальный инструмент W3C или WebAIM?

Нет. Он самостоятельно реализует публичную формулу контраста WCAG 2.x и не связан с W3C или какой-либо другой организацией по доступности.