Проверка контраста (оценки WCAG AA / AAA)

Как работает соотношение контраста

WCAG (Руководство по обеспечению доступности веб-контента) определяет контраст как соотношение между относительной яркостью двух цветов. Формула линеаризует каждый sRGB-канал, взвешивает их по чувствительности глаза человека (R 0,2126, G 0,7152, B 0,0722), затем вычисляет (более светлый + 0,05) / (более тёмный + 0,05). Результат варьируется от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом).

Расчёт выполняется в браузере по официальной формуле WCAG 2.x. Четыре значка оценки проверяются по порогам: AA — 4,5:1 (обычный) и 3:1 (крупный), AAA — 7:1 (обычный) и 4,5:1 (крупный). «Крупный текст» — это 24px / 18pt или более, либо 18,66px / 14pt жирным.

Почему важно минимально соответствовать AA

AA — юридически обязательный уровень во многих юрисдикциях (Закон о доступной среде РФ, EU EN 301 549, WCAG). Несоответствие AA для основного текста — наиболее распространённая проблема доступности и проще всего исправляется при проектировании, а не после запуска.

AAA рекомендован для длинного текста, государственных сервисов и интерфейсов с высокими ставками. Он строг — интуитивный выбор дизайнера «светло-серый на белом» обычно не проходит AAA. Если сайт в основном предназначен для беглого просмотра, целевой уровень — AA; если публикуются книги, статьи или критическая информация — AAA.

Распространённые ошибки

«На моём экране выглядит нормально.» Откалиброванные экраны, флуоресцентный офисный свет и использование смартфона на улице — всё это меняет воспринимаемый контраст. Используйте соотношение, а не глаз.

Проектирование тёмной темы путём инверсии hex-кодов. Инверсия меняет оттенок и ломает контраст. Заново проверяйте каждую цветовую пару после смены темы.

Доверие брендбукам. Многие фирменные палитры создавались до осознания требований WCAG. Если фирменный розовый на белом не проходит, предложите немного более тёмный розовый для основного текста, а оригинальный оставьте для декоративного использования.