Контраст текста и фона: требования WCAG и как проверить
Какой контраст текста нужен по WCAG 2.1 (4,5:1 и 3:1), как он считается, как проверить и исправить цвета палитры, чтобы текст читался.
Цвет в веб-дизайне · · 2 мин чтения
По стандарту доступности WCAG 2.1 (уровень AA) контраст обычного текста с фоном должен быть не ниже 4,5:1, а крупного текста (от 24 px, или от 18,66 px жирным) — не ниже 3:1. Для уровня AAA требования выше: 7:1 и 4,5:1. Контраст считается по относительной яркости цветов и выражается числом от 1:1 (нет различия) до 21:1 (чёрный на белом).
Нормы в таблице
| Что | AA | AAA |
|---|---|---|
| Обычный текст | 4,5:1 | 7:1 |
| Крупный текст (≥ 24 px или ≥ 18,66 px жирный) | 3:1 | 4,5:1 |
| Иконки, границы полей, графики | 3:1 | — |
Как считается контраст
- Для каждого цвета вычисляется относительная яркость L: каналы RGB переводятся в линейные значения и складываются с весами 0,2126 (R), 0,7152 (G) и 0,0722 (B). Зелёный вносит больше всего — глаз к нему чувствительнее.
- Контраст = (L светлого + 0,05) / (L тёмного + 0,05).
Поэтому жёлтый #FFD700 на белом почти не читается (около 1,4:1), а тёмно-синий #1D3557 на белом даёт около 12:1.
Примеры пар
| Текст | Фон | Примерный контраст | Итог |
|---|---|---|---|
#000000 |
#FFFFFF |
21:1 | Отлично |
#4E4747 |
#FFFFFF |
около 9:1 | AAA |
#808080 |
#FFFFFF |
около 3,9:1 | Только крупный текст |
#FFFFFF |
#FA9B59 |
около 2:1 | Не проходит |
#1E1A1D |
#FA9B59 |
около 8:1 | AAA |
Вывод: на светлых акцентах (персиковом, жёлтом, мятном) текст должен быть тёмным.
Как проверить
- Инструменты разработчика браузера: в Chrome при выборе цвета текста в DevTools показывается коэффициент контраста.
- Плагины Figma для проверки контраста.
- Онлайн-калькуляторы контраста по WCAG.
Как исправить палитру
- Меняйте светлоту, а не тон: у HSL-цвета сдвиньте L вниз для текста на светлом фоне или вверх — на тёмном.
- Для текста на фото добавьте полупрозрачную подложку или затемнение.
- Не используйте акцентный цвет для длинного текста — только для кнопок и коротких выделений.
Генератор палитры сам подбирает чёрный или белый цвет подписей на цветных полосах по яркости фона — так HEX-коды читаются на любом цвете.
Частые вопросы
Обязательно ли соблюдать WCAG?
Для государственных сайтов многих стран это требование закона. Для остальных — рекомендация, но плохой контраст напрямую ухудшает читаемость и конверсию.
Учитывается ли размер шрифта?
Да. Крупный текст читается легче, поэтому для него норма ниже: 3:1 вместо 4,5:1.
Как быть с людьми с нарушением цветовосприятия?
Не передавайте смысл только цветом и проверяйте палитру в симуляторе. Подробнее — в статье доступная палитра и дальтонизм.