Проверка контраста
Контрастность для доступности WCAG
Как использовать Проверка контраста
Контрастность для доступности WCAG Бесплатный онлайн-инструмент, без регистрации, без навязчивой рекламы. Используйте прямо сейчас.
Почему важен контраст цветов?
Около 8% мужчин и 0,5% женщин в России имеют ту или иную форму цветовой слепоты. Ещё больше людей читают текст в сложных условиях — яркий солнечный свет, некачественные экраны, усталость, возрастное ухудшение зрения. Достаточный контраст цветов обеспечивает читаемость контента для всех пользователей.
- Соответствие стандартам доступности: WCAG 2.1 (Web Content Accessibility Guidelines) определяет минимальные коэффициенты контраста. Российское ГОСТ Р 52872 регулирует доступность веб-контента для людей с ограниченными возможностями. Сайты госорганов обязаны соответствовать требованиям доступности по ПП РФ № 1752.
- Проверка на этапе дизайна: Проверяйте сочетания цветов текста и фона в Figma или Sketch до начала разработки. Исправить на этапе дизайна несравнимо дешевле, чем после запуска.
- Библиотеки компонентов: Убедитесь, что все цветовые сочетания в дизайн-системе соответствуют требованиям доступности в любом контексте использования.
- Тёмный режим: При реализации тёмного режима цвета, работавшие на светлом фоне, часто не проходят проверку на тёмном. Проверяйте каждый режим независимо.
- Визуализация данных: Убедитесь, что цвета в графиках различаются для людей с цветовой слепотой и читаются на разных фонах.
Уровни WCAG: AA (соотношение ≥4,5:1 для обычного текста, ≥3:1 для крупного) — требование большинства законодательств и стандарт для коммерческих сайтов. AAA (≥7:1) — максимальная доступность для высоконагруженных контентных ресурсов.
Какое соотношение контраста требует WCAG AA?
WCAG AA требует минимум 4,5:1 для обычного текста (менее 18pt или менее 14pt полужирного) и 3:1 для крупного текста (18pt и более, или 14pt полужирного и более). Для UI-компонентов и графических элементов — также 3:1.
Как рассчитывается коэффициент контраста?
Соотношение = (L1 + 0,05) / (L2 + 0,05), где L1 — относительная яркость более светлого цвета, L2 — тёмного. Максимальный контраст — 21:1 (белый на чёрном). Соотношение 1:1 — нет контраста (одинаковые цвета).
Применяется ли коэффициент к цветному тексту на цветном фоне?
Да. Формула WCAG сравнивает относительную яркость, а не только воспринимаемую насыщенность. Красный текст на зелёном фоне может иметь низкий коэффициент контраста, даже если оба цвета «яркие». Всегда тестируйте реальные сочетания.
Чем контраст цветов отличается от цветовой слепоты?
Коэффициент контраста измеряет разницу в яркости — влияет на всех пользователей (включая при ярком освещении или плохом экране). Цветовая слепота влияет на различение цветов без обязательного влияния на яркость. Дизайн только на красно-зелёных контрастах может пройти тест по яркости, но быть неразличимым для людей с дейтераномалией.
Влияет ли жирность шрифта на требования к контрасту?
Да. Жирный и крупный текст по своей природе читабельнее, поэтому требования ниже. WCAG AA требует 3:1 для текста 18pt (24px) и более, или 14pt (около 18,67px) полужирного и более. Для мелкого или не-полужирного текста — 4,5:1.
Проверка контраста vs симулятор цветовой слепоты vs аудит доступности
Проверка контраста верифицирует соотношение яркости между двумя конкретными цветами. Симулятор цветовой слепоты (DevTools Chrome, Coblis) показывает, как дизайн выглядит при разных нарушениях зрения. Полный аудит доступности (axe, Lighthouse, WAVE) сканирует всю страницу на все нарушения WCAG. Для полной доступности: проверяйте контраст на этапе дизайна, симулируйте цветовую слепоту перед публикацией, запускайте автоматический аудит на продакшн-сайте.