Проверка
контраста по стандарту WCAG
Задайте цвет текста и фона — увидите коэффициент контраста, соответствие пяти уровням стандарта и живое превью. Если пара не проходит, инструмент сам подберёт ближайший оттенок, который пройдёт.
- AA — обычный текстосновной уровень, к нему стремятся по умолчаниюпроходит
- AA — крупный текстот 24 px или от 18,66 px полужирнымпроходит
- AAA — обычный текстповышенный уровень, нужен не всегданужно 7 : 1
- AAA — крупный текстповышенный уровень для заголовковпроходит
- Элементы интерфейсаграницы полей, иконки, индикаторы состоянияпроходит
| Текст | #767676 | |
| Фон | #FFFFFF |
Почему на глаз оценить нельзя
Контраст считается не по разнице светлоты, а по относительной яркости с гамма-коррекцией — тем самым нелинейным преобразованием, которое учитывает, что глаз воспринимает светлое и тёмное неодинаково. Из-за этого результат часто расходится с интуицией: жёлтый на белом выглядит контрастным, а расчёт даёт около 1,1 к одному.
Разница между проходящим и непроходящим цветом бывает крошечной. Серый #767676 на белом даёт 4,54 и проходит уровень AA, а соседний #777777 — уже 4,48 и не проходит. Заметить это глазом невозможно, поэтому проверять надо числом, а не ощущением.
- 4,5 : 1 — AA для обычного текста
- 3 : 1 — AA для крупного, от 24 px
- 7 : 1 — AAA для обычного текста
- 3 : 1 — границы полей и иконки
- 21 : 1 — максимум, чёрный на белом