Проверка контраста
Два цвета на входе — вердикт WCAG на выходе: точная формула относительной яркости sRGB из спецификации, соотношение, AA и AAA для обычного и крупного текста — а когда пара не проходит, ближайший проходящий оттенок текста: вычисленный, не угаданный. Живой образец показывает пару всё время.
Формула, а не впечатление
Контраст определён, а не оценивается на глаз: относительная яркость каждого цвета считается линеаризацией sRGB — ветка ≤0,04045, степень 2,4, веса 0,2126/0,7152/0,0722 — а соотношение равно (светлее + 0,05) / (темнее + 0,05). Каждый чекер, следующий спецификации, выдаёт одно и то же число до второго знака — именно это делает число цитируемым в ревью.
Живой образец существует потому, что число необходимо, но недостаточно: пара может пройти AA и остаться эстетической ошибкой. Прочтите вердикты, затем образец.
Частые вопросы
Что на самом деле значат 4,5:1 и остальные пороги?
Это пол читаемости по WCAG: 4,5:1 для обычного текста и 3:1 для крупного на уровне AA — уровне, на который ссылаются законы и контракты; 7:1 и 4,5:1 на строгом AAA. Крупный — минимум 24px или 18,5px жирным. Само соотношение идёт от 1:1 (одинаковые) до 21:1 (чёрный на белом).
Почему мой «нормально выглядящий» серый не проходит?
Потому что экран и глаз не согласны: яркость считается после снятия гаммы, и средние серые несут куда меньше контраста, чем кажется на ярком дисплее. Знаменитая граница — #767676 на белом: самый светлый серый, проходящий AA. Всё светлее читается на вашем мониторе и проваливается на чьём-то телефоне на солнце.
Как вычисляется проходящее предложение?
Инструмент ведёт цвет текста к чёрному или белому — в ту сторону, где контраст на этом фоне растёт — шагами в один процент и останавливается на первом оттенке, достигшем цели. Характер вашего оттенка сохраняется сколько возможно; когда не проходит даже крайность, следует честный отказ — случай среднетоновых фонов.
Относится ли контраст к иконкам и частям интерфейса?
Да, со своим правилом: WCAG требует 3:1 для графических объектов и компонентов интерфейса — рамок полей, смысловых иконок, индикаторов фокуса. Вердикт AA-крупный заодно и есть эта проверка: порог — те же 3:1.
Похожие инструменты
- Конструктор схем и блок-схемРисуйте блок-схемы и диаграммы, соединяйте блоки стрелками, которые прокладывают себя сами, и раскладывайте всё автоматически. Экспорт в SVG.
- Генератор паролейСоздавайте надёжные пароли криптографическим генератором браузера с оценкой стойкости.
- HTML-сущностиКодируйте текст для HTML или декодируйте сущности обратно — ломающие разметку знаки, именованные наборы, числовые ссылки до эмодзи. Ровно один проход.