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

Что такое Проверка цветового контраста?

Проверка цветового контраста — это бесплатный онлайн-инструмент контраста WCAG и APCA для дизайнеров, разработчиков и специалистов по доступности. Он принимает цвета в HEX (#rgb, #rrggbb и 8-значный #rrggbbaa с альфой), rgb()/rgba() и hsl()/hsla(), накладывает полупрозрачный передний план на фон перед измерением и сообщает как коэффициент WCAG 2.1 (от 1:1 до 21:1), так и оценку контраста светлоты APCA Lc. Он отмечает уровень AA WCAG 2.1 (4.5:1 обычный, 3:1 крупный) и AAA (7:1 обычный, 4.5:1 крупный), добавляет значок 3:1 для нетекстовых компонентов интерфейса и графики и может предложить ближайший проходящий передний план — изменяя только его светлоту до достижения AA или AAA — который вы применяете одним кликом.

Как пользоваться Проверка цветового контраста

1. Введите цвет переднего плана (текста) как HEX, rgb() или hsl() — принимается 8-значный HEX или rgba с альфой — либо щёлкните по палитре, чтобы выбрать визуально.
2. Введите цвет фона так же; перед измерением контраста полупрозрачный передний план накладывается на него (а фон — на белый).
3. Используйте кнопку «Поменять», чтобы в любой момент поменять местами передний план и фон.
4. Прочитайте коэффициент контраста WCAG 2.1 и оценку APCA Lc, показанную рядом.
5. Проверьте значки AA и AAA для обычного и крупного текста, а также значок 3:1 для компонентов интерфейса и графики.
6. Если пара не проходит, посмотрите ближайший проходящий цвет AA или AAA и нажмите «Применить», чтобы обновить передний план.

Примеры

Передний план #595959, Фон #ffffff

Коэффициент 7.00:1 и высокий APCA Lc — проходит AA и AAA для обычного и крупного текста

Передний план #00000080 (50% чёрного) на #ffffff

Сначала накладывается в сплошной серый, затем вычисляются коэффициент WCAG и APCA Lc

Передний план #999999 на #ffffff — 2.85:1, не проходит AA

Откройте ближайший цвет AA и нажмите «Применить», чтобы достичь 4.5:1, сохранив тот же оттенок

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

Какие коэффициенты контраста требует WCAG?

Уровень AA WCAG 2.1 требует не менее 4.5:1 для обычного текста и 3:1 для крупного; уровень AAA требует 7:1 и 4.5:1. Нетекстовые компоненты интерфейса и графические объекты (SC 1.4.11) требуют 3:1. Эта проверка показывает значок прохождения/непрохождения для каждого из этих порогов.

Что такое оценка APCA Lc?

APCA (Accessible Perceptual Contrast Algorithm) — это метод контраста, предложенный для WCAG 3. Он даёт значение контраста светлоты (Lc) примерно от 0 до 108, где больше значит выше контраст, и учитывает полярность (тёмное на светлом или светлое на тёмном). Он показывается рядом с коэффициентом WCAG 2.1 и использует собственные уровни рекомендаций вместо одного «прошёл/не прошёл».

Как работает подсказка ближайшего проходящего цвета?

Она сохраняет тон и насыщенность переднего плана и изменяет только его светлоту — светлее или темнее — пока контраст с фоном не достигнет AA (4.5:1) или AAA (7:1); затем вы можете применить её одним кликом. Если фон среднего тона и цель недостижима, она показывает ближайший возможный цвет.

Какие форматы цвета можно вводить?

HEX (#rgb, #rrggbb, а также #rgba и 8-значный #rrggbbaa с альфой), rgb()/rgba() и hsl()/hsla(), со встроенной палитрой для каждого поля. Перед вычислением коэффициента полупрозрачный передний план накладывается на фон, который сам сначала сводится на белый. Именованные цвета не поддерживаются.

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

Нет. Весь разбор, наложение и расчёты яркости, коэффициента и APCA выполняются полностью в вашем браузере с помощью JavaScript — никакие цвета не загружаются и ничего не отправляется на сервер, поэтому инструмент работает конфиденциально и даже офлайн после загрузки страницы.