Контрастность — один из самых частых провалов доступности. Слабовидящие, пожилые пользователи, люди с нарушениями цветовосприятия и все, кто смотрит на телефон под солнцем, страдают от бледного текста одинаково. Хорошая новость: это легко измерить и исправить. Ниже — требования WCAG, формула и практические советы.
Что такое WCAG
WCAG (Web Content Accessibility Guidelines) — рекомендации консорциума W3C по доступности веб-контента. Актуальная версия — WCAG 2.2 (2023 год); требования к контрастности в ней такие же, как в 2.1. В России действует ГОСТ Р 52872-2019 «Интернет-ресурсы и другая информация, представленная в электронно-цифровой форме…», основанный на WCAG 2.1.
Уровни соответствия:
- A — минимальный;
- AA — стандарт де-факто для большинства сайтов и законодательных требований;
- AAA — повышенный, обычно применяется к отдельным частям интерфейса.
Требования к контрастности
| Что проверяем | AA | AAA |
|---|---|---|
| Обычный текст | 4,5:1 | 7:1 |
| Крупный текст (≥ 24 px или ≥ 18,66 px жирным) | 3:1 | 4,5:1 |
| Значки, границы полей, графики, фокус (критерий 1.4.11) | 3:1 | — |
Крупный текст в WCAG определён как 18 pt (24 CSS px) или 14 pt жирным (около 18,66 px).
Исключения: логотипы, декоративные элементы, неактивные (disabled) кнопки, текст на фотографиях, если он не несёт смысла.
Как считается коэффициент
Коэффициент контрастности — отношение относительной яркости светлого и тёмного цветов:
Контраст = (L1 + 0,05) / (L2 + 0,05)где L1 — относительная яркость более светлого цвета, L2 — более тёмного. Яркость считается по линеаризованным значениям R, G, B с весами 0,2126, 0,7152 и 0,0722 — зелёный канал вносит наибольший вклад, потому что глаз к нему наиболее чувствителен.
Диапазон: от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом).
Вручную считать неудобно — проверяйте пары в проверке контраста.
Примеры
| Текст | Фон | Контраст | AA (обычный текст) |
|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | ✅ |
| #1A1A1A | #FFFFFF | 17,4:1 | ✅ |
| #595959 | #FFFFFF | 7,0:1 | ✅ (и AAA) |
| #767676 | #FFFFFF | 4,54:1 | ✅ |
| #777777 | #FFFFFF | 4,48:1 | ❌ |
| #999999 | #FFFFFF | 2,85:1 | ❌ |
| #FFFFFF | #2563EB (синий) | 5,17:1 | ✅ |
| #FFFFFF | #DC2626 (красный) | 4,83:1 | ✅ |
| #FFFFFF | #EF4444 (светло-красный) | 3,76:1 | ❌, только крупный текст |
| #FFFFFF | #16A34A (зелёный) | 3,30:1 | ❌, только крупный текст |
| #FFFFFF | #15803D (тёмно-зелёный) | 5,02:1 | ✅ |
Белый текст на ярко-зелёной кнопке — классическая ошибка: зелёный кажется насыщенным, но он светлый. Достаточно затемнить его на пару ступеней.
HEX, RGB и HSL
Один и тот же цвет можно записать по-разному:
color: #2563EB; /* HEX */
color: rgb(37 99 235); /* RGB */
color: hsl(221 83% 53%); /* HSL: тон, насыщенность, светлота */- HEX — компактная запись для дизайна и кода.
- RGB — значения каналов от 0 до 255.
- HSL — удобна для подбора оттенков: меняя только светлоту (L), вы получаете более светлый или тёмный вариант того же цвета.
Переводить цвета между форматами можно в конвертере цветов. Для доступной палитры удобно зафиксировать тон и насыщенность и подбирать светлоту, пока контраст не достигнет 4,5:1.
Учтите: светлота в HSL не равна воспринимаемой яркости. Жёлтый и синий с одинаковым L имеют совершенно разный контраст с белым. Поэтому финальную проверку всегда делайте по коэффициенту WCAG. Для точной работы с яркостью дизайнеры используют пространства OKLCH и LCH.
Как построить доступную палитру
- Определите фон — белый, светло-серый или тёмный.
- Основной текст — не менее 7:1, чтобы был запас.
- Вторичный текст (подписи, даты) — не менее 4,5:1.
- Кнопки: проверьте текст на фоне кнопки и саму кнопку относительно фона страницы (3:1 для границ, если кнопка без текста).
- Ссылки: если отличаются от текста только цветом, нужен контраст 3:1 и с окружающим текстом, — проще добавить подчёркивание.
- Состояния: hover, focus, ошибка и успех тоже проверяются. Видимый фокус обязателен для навигации с клавиатуры.
- Тёмная тема: проверяется отдельно; чистый белый на чёрном утомляет, часто выбирают светло-серый на тёмно-сером с контрастом около 12–15:1.
Как проверить контраст в браузере
Не обязательно копировать цвета вручную:
- Chrome DevTools: выберите элемент, нажмите на квадратик цвета в панели стилей — откроется палитра с коэффициентом контраста и отметками AA/AAA.
- Lighthouse во вкладке DevTools проверяет страницу целиком и выводит список элементов с недостаточным контрастом.
- Эмуляция нарушений зрения в DevTools (вкладка Rendering) показывает, как страницу видят люди с дальтонизмом или нечётким зрением.
Автоматические проверки не видят текст на фоновых изображениях и градиентах — такие места проверяйте вручную по самому светлому участку фона.
Контраст в мобильных приложениях
Требования WCAG применяются и к мобильным приложениям. Гайдлайны Apple и Google также рекомендуют контраст не ниже 4,5:1 для основного текста. На телефоне контраст особенно важен из-за яркого солнца и пониженной яркости экрана в режиме энергосбережения.
Не только контраст
- Не передавайте смысл только цветом. Красная рамка у поля с ошибкой должна сопровождаться текстом или значком — около 8 % мужчин имеют нарушения цветового зрения.
- Текст на изображениях требует подложки или затемнения фото.
- Размер шрифта влияет на читаемость не меньше цвета: для основного текста на сайте разумно от 16 px.
Подробнее о других факторах, влияющих на пользователей и поисковые системы, — в гайде Core Web Vitals.
Чек-лист
- Основной текст ≥ 4,5:1 (лучше 7:1).
- Крупные заголовки ≥ 3:1.
- Значки, границы полей и фокус ≥ 3:1.
- Ссылки отличаются от текста не только цветом.
- Ошибки и статусы дублируются текстом или значком.
- Тёмная тема проверена отдельно.