Как работает расчет контраста по WCAG
Инструмент принимает две цветовые пары: цвет текста и цвет фона. Для каждого цвета вычисляется относительная яркость по формуле WCAG 2.1, учитывающей особенности человеческого зрения.
Далее рассчитывается коэффициент контраста: (L1 + 0,05) / (L2 + 0,05), где L1 — более светлый цвет, а L2 — более темный. Полученное значение сравнивается с требованиями WCAG для обычного и крупного текста.
Что учитывать при выборе цветов
WCAG предъявляет разные требования к контрасту для обычного и крупного текста: для обычного AA — минимум 4,5:1, для крупного — от 3:1. AAA стандарты еще строже.
Размер и жирность шрифта влияют на допустимый уровень контраста: текст считается крупным, если он ≥24px или ≥18px, но жирный. Указывайте это вручную при проверке.
Ограничения и советы по использованию
Инструмент не может анализировать контраст поверх изображений или градиентов, если не выбрана конкретная точка цвета. Для проверки UI-элементов или иконок используйте их заливочный цвет.
Полупрозрачные или сложные цвета могут давать некорректный результат — лучше предварительно определить итоговый цвет. Проверка выполняется мгновенно и полностью локально, без передачи данных на сервер.
Часто задаваемые вопросы
Как определить, считается ли мой текст 'крупным' для сниженого порога контраста?
Текст считается крупным при размере ≥24px или ≥18px, если он жирный (bold). Для других случаев используйте стандартный порог WCAG AA.
Можно ли проверить контраст для иконок или интерфейсных элементов?
Да, выберите основные цвета иконки и фона. Инструмент сравнивает любые пары цветов — не только текстовые.
Что произойдет, если использовать полупрозрачные цвета?
Результат может быть неточным, так как расчет ведётся по итоговой смеси цветов. Лучше использовать финальный цвет, получившийся после наложения.
Можно ли проверить сразу несколько пар цветов?
В текущей версии можно анализировать одну пару за раз. Для массовой проверки повторите ввод с разными комбинациями.
Учитывает ли инструмент особенности дисплея или цветовые профили?
Нет, расчет производится строго по стандартным значениям RGB — визуальное восприятие на разных устройствах может немного отличаться.
Насколько точен расчет контраста относительно реального восприятия?
Алгоритм соответствует стандарту WCAG и дает объективную оценку для большинства случаев. Однако фактическая читабельность может зависеть от других факторов дизайна.
Что-то не так или есть идея? Сообщить