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

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

Пороговые значения

• WCAG AA, обычный текст: минимум 4,5:1.
• WCAG AA, крупный текст (18pt+ или 14pt+ жирный): минимум 3:1.
• WCAG AAA, обычный текст: минимум 7:1.
• WCAG AAA, крупный текст: минимум 4,5:1.
• Нетекстовые компоненты интерфейса (кнопки, границы форм): минимум 3:1 (WCAG 2.1+).

Почему контрастность важна

Текст с низкой контрастностью нечитаем для пользователей с ослабленным зрением (около 4% населения), пользователей при ярком солнечном свете, пользователей дешёвых мониторов и стареющих глаз (в конечном итоге — для всех). Многие дизайн-системы по умолчанию используют серый на сером, потому что это выглядит элегантно на откалиброванном 5K-дисплее дизайнера — и становится нечитаемым в других условиях.

Несоблюдение WCAG AA также может повлечь юридические последствия в США (ADA Title III), ЕС (EAA) и многих других юрисдикциях. Дешёвая страховка: проверяйте каждую пару текст/фон перед публикацией.

Что мы сообщаем

1. Коэффициент контрастности в виде числа (например, 4,71:1).
2. Результат (пройдено/не пройдено) для каждого уровня WCAG и размера текста.
3. Предлагаемые исправления: ближайший более тёмный цвет переднего плана или более светлый фон, который пройдёт проверку.
4. Предварительный просмотр с образцом текста в данной цветовой паре.

Используйте вместе с симулятором цветовой слепоты

Контрастность и цветовая слепота — разные аспекты доступности. Запустите Симулятор цветовой слепоты для того же интерфейса, чтобы убедиться, что он работает и для пользователей с нарушениями цветовосприятия.