Бесплатный инструмент

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

Проверьте цветовой контраст по WCAG AA и AAA. Исправления в один клик, проходящие проверку — обычный текст, крупный текст и UI-компоненты.

Цвет текста (передний план)

Цвет фона

—:1

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

Предпросмотр — текст на фоне

Быстрая лиса

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Это основной текст 14px для проверки контраста мелкого текста.

Кнопка

Предпросмотр — поменян

Быстрая лиса

Тот же текст и фон, поменяны. Некоторые пары цветов работают только в одном направлении.

Кнопка

Быстрые исправления — ближайшие проходящие цвета

О контрасте WCAG

AA — юридический стандарт в большинстве юрисдикций: 4.5:1 для обычного текста, 3:1 для крупного (18pt+ или 14pt жирного).
AAA — «усиленный»: 7:1 обычный, 4.5:1 крупный. Стремитесь к этому на основном тексте, если можете.
UI-компоненты (кнопки, границы форм, иконки) нуждаются в 3:1 к соседнему цвету — как крупный текст.
Следите за значением только-цветом. Сочетайте цвет с иконкой, подчёркиванием или меткой, чтобы дальтоники тоже получили сигнал.
Apple HIG и Material оба требуют минимум 4.5:1 для текста в приложении — провал тут — известный флаг проверки доступности App Store.

LaunchShots поставляется со встроенными подсказками контраста в редакторе — попробуйте.