Как проверить контраст цветов для доступности
Около 1 мужчины из 12 и 1 женщины из 200 имеют ту или иную форму нарушения цветового зрения. Миллионы других имеют слабое зрение, стареющее зрение или просматривают экраны на ярком солнце. Если у вашего текста недостаточно контраста с фоном, эти люди не могут его прочитать.
Контраст цветов — это не «плюс», это центральное требование доступности.
Что требует WCAG
Web Content Accessibility Guidelines (WCAG) определяют минимальные коэффициенты контраста между текстом и фоном:
| Уровень | Обычный текст | Крупный текст | Нетекстовые элементы |
|---|---|---|---|
| AA (минимум) | 4,5 : 1 | 3 : 1 | 3 : 1 |
| AAA (усиленный) | 7 : 1 | 4,5 : 1 | — |
«Крупный текст» означает 18 px жирный или 24 px обычный и больше.
Коэффициент контраста идёт от 1 : 1 (нет контраста — белое на белом) до 21 : 1 (максимальный контраст — чёрное на белом).
Как проверить контраст
- Выберите ваши цвета — введите цвет текста (передний план) и цвет фона через HEX-коды, RGB-значения или селекторы.
- Просмотрите результаты — инструмент мгновенно отображает коэффициент контраста и проходит ли ваша комбинация WCAG AA и AAA в обычном и крупном тексте.
- Настройте при необходимости — если контраст не проходит, затемните текст или осветлите фон (или наоборот), пока не достигнете требуемого уровня.
Распространённые ошибки контраста
Светло-серый текст на белом — #999999 на #ffffff имеет коэффициент всего 2,8 : 1. Это не проходит WCAG AA. Это может выглядеть «лаконично» для дизайнера с идеальным зрением, но нечитаемо для многих.
Цветной текст на цветном фоне — синяя кнопка с белым текстом часто проходит, но зелёная кнопка с белым текстом — нет. Всегда проверяйте — нельзя оценить коэффициент контраста на глаз.
Текст-подсказка — тексты-подсказки полей известны слабым контрастом. Даже если WCAG не требует их строго, пользователи всё равно должны их читать.
Тёмный режим — дизайнеры часто используют средний серый на тёмно-сером для «тонкого» вида. Это часто не проходит проверки контраста.
Советы
- Проверяйте каждую комбинацию текста/фона — ничего не предполагайте. Даже опытные дизайнеры удивляются комбинациям, которые не проходят.
- Тестируйте обе темы — если у вашего сайта светлый и тёмный режимы, проверяйте контраст в обоих. Цвет, работающий на белом, может не пройти на тёмно-сером.
- Используйте брендовые цвета с разбором — если ваш брендовый синий не проходит как цвет текста, используйте его для более крупных элементов (кнопок, заголовков), где применяется порог «крупного текста» (3 : 1), и используйте более тёмный оттенок для основного текста.
- Не полагайтесь только на цвет — помимо достаточного контраста, никогда не передавайте информацию только через цвет. Используйте иконки, метки или паттерны в дополнение.
Часто задаваемые вопросы
Какой коэффициент контраста выбирать?
Для обычного текста стремитесь как минимум к 4,5 : 1 (WCAG AA). Для крупного текста (18 px жирный или 24 px обычный) 3 : 1 достаточно. Для самого высокого уровня доступности (AAA) стремитесь к 7 : 1 для обычного текста.
Применяется ли это только к тексту?
Нет. WCAG 2.1 также требует достаточного контраста для компонентов интерфейса и графических объектов (иконок, границ полей, индикаторов фокуса). Минимум для нетекстовых элементов — 3 : 1.
А что насчёт тёмного режима?
Тёмный режим требует тех же проверок контраста. Белый текст на тёмном фоне часто легко проходит, но серый текст на тёмно-сером фоне часто не проходит. Тестируйте оба режима.
Является ли контраст цветов юридическим требованием?
Во многих юрисдикциях да. ADA (США), EN 301 549 (ЕС) и аналогичные законы налагают цифровую доступность. Соответствие WCAG — это признанный стандарт для их выполнения.