Проверка контрастности цветов
Локально проверяйте контрастность цветов переднего плана и фона по формуле относительной яркости WCAG, отдельно определяйте порог AA/AAA для обычного и крупного основного текста и поддерживайте экспорт отчётов.
Как пользоваться средством проверки контрастности цветов
Значения цветов рассчитываются только в текущем браузере; относительная яркость и контрастность не загружаются и не сохраняются.
Введите два цвета
Выберите цвет с помощью палитры или вставьте значение #RRGGBB, чтобы задать цвет переднего и заднего плана; предварительный просмотр обновится одновременно.
Порог проверки
Нажмите «Проверить», чтобы отдельно просмотреть статус прохождения для обычного текста AA, обычного текста AAA и крупного текста AA.
Скопировать запись проверки
После успешной проверки можно скопировать отчёт или скачать TXT, содержащий значения цветов, коэффициенты и результаты по всем уровням порогов.
Ограничения и примечания
- В первой версии принимаются только #RGB или #RRGGBB без прозрачности; для полупрозрачных цветов сначала необходимо определить фактический фон композиции.
- 4.5:1 Применяется к обычному основному тексту AA, 3:1 применяется к крупному тексту AA, а 7:1 — справочный порог для обычного основного текста AAA; также необходимо проверить размер шрифта, его начертание и контрастность нетекстовых элементов.
- Инструмент вычисляет только пару сплошных цветов и не моделирует градиенты, изображения, тени, рендеринг шрифтов или сложный фон.
Часто задаваемые вопросы
Что означает 4.5:1?
Это WCAG минимальный порог контрастности AA для обычного основного текста; AA порог для крупного основного текста составляет 3:1.
Почему прозрачный цвет нельзя определить напрямую?
Итоговый цвет прозрачного переднего плана или фона зависит от порядка наложения и фонового изображения; надёжнее сначала определить сплошной цвет, отображаемый фактически.
Достаточна ли контрастность для доступности?
Не обязательно. Также следует проверить размер шрифта, начертание, состояния, фокус, нетекстовые компоненты, фоновые изображения и отображение на реальном устройстве.