WCAG и цветовой контраст

Коротко: WCAG (Web Content Accessibility Guidelines) — международный стандарт доступных сайтов. Одно из его правил: текст должен достаточно выделяться на фоне.

Подробнее: Руководства W3C делятся на четыре принципа: воспринимаемость, управляемость, понятность и надёжность. Есть три уровня соответствия: A, AA и AAA. Для большинства предложений целью является AA, которую предполагают и такие законы, как немецкий Закон об усилении доступности (BFSG) и европейский стандарт EN 301 549.

Подробности

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

Контраст задаётся как отношение относительных яркостей двух цветов, от 1:1 (равны) до 21:1 (чёрное на белом). Яркость цветового значения вычисляется из красной, зелёной и синей составляющих; зелёная учитывается больше всего, синяя меньше всего, потому что глаз к ней менее чувствителен.

Формула: контраст = (L1 + 0,05) / (L2 + 0,05), где L1 — яркость более светлого, L2 — более тёмного цвета.

Минимальные значения

Содержимое	Уровень AA	Уровень AAA
Обычный текст	4,5 : 1	7 : 1
Крупный текст (примерно от 24 px или 19 px жирным)	3 : 1	4,5 : 1
Элементы управления и графика (границы, значки)	3 : 1	–

Серый текст на белом — самая частая ошибка: #767676 на белом едва достигает 4,5 : 1, #999999 уже нет.

Почему это важно

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

Другие правила о цвете

• Не только цвет как индикатор: отмечайте ошибки дополнительно текстом или значком, а не просто красным.
• Видимый фокус: элементу в фокусе (клавиатура) нужна чёткая рамка.
• Тёмной теме нужны собственные значения цвета, которые тоже нужно проверять.

Проверка и исправление

С помощью проверки контраста вы вводите цвет переднего плана и фона и получаете коэффициент и заключение об AA и AAA. Если значения недостаточно, вы делаете текст темнее (на светлом фоне) или светлее (на тёмном), пока не будет достигнут предел. Обычно это небольшая правка, почти незаметная, но помогающая многим.

См. также: Доступность, CSS, HTML