Как пользоваться
- Введите цвет текста и цвет фона HEX-кодами или выберите их палитрами.
- Посмотрите коэффициент и таблицу «проходит / не проходит». В превью видны оба размера текста.
- Кнопка Поменять местами проверяет обратное сочетание, например светлый текст на тёмном фоне.
Формула
WCAG 2 определяет относительную яркость как L = 0,2126 R + 0,7152 G + 0,0722 B, где каждый канал сначала переводится из sRGB в линейный свет. Коэффициент контраста — (L1 + 0,05) / (L2 + 0,05), где L1 — более светлый цвет. Чёрный на белом даёт 21:1, одинаковые цвета — 1:1.
| Уровень | Обычный текст | Крупный текст |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Элементам интерфейса и значимой графике для AA нужно 3:1.
Пример
Серый #777777 на белом: яркость серого около 0,184, коэффициент 1,05 / 0,234 = 4,48. Крупный текст проходит AA, а обычный — нет. Если взять #767676, получится 4,54 : 1, и AA для обычного текста уже пройден.
Советы
- Контраст — не единственное требование доступности: не передавайте смысл только цветом.
- Текст поверх фото или градиента проверяйте в самом неудачном месте.
- Контраст WCAG 2 — простая мера, она хуже работает с тёмной темой и тонкими шрифтами, поэтому считайте её минимумом.