Центр знаний и экспертное руководство
Проверка контрастности цветов (WCAG 2.1): аудит доступности текста и интерфейсов
Калькулятор проверки контрастности цветов (WCAG Color Contrast) — инструмент аудита доступности цифровых интерфейсов (Accessibility / a11y). Согласно международному стандарту Web Content Accessibility Guidelines (WCAG 2.1), текст и интерактивные кнопки должны обладать достаточным контрастом относительно фона для людей с нарушениями зрения и дальтонизмом.
Инструмент вычисляет математический коэффициент относительной яркости (Relative Luminance) и контрастности (от 1:1 до 21:1) и выдает однозначный вердикт соответствия уровням AA и AAA для обычного и крупного текста. Аудит проводится на 100% локально.
Архитектура и математическая формула
Коэффициент контрастности = (L1 + 0.05) / (L2 + 0.05), где L1 — яркость светлого, L2 — темного цвета
Относительная яркость L вычисляется по стандарту sRGB с гамма-коррекцией: L = 0.2126 × R + 0.7152 × G + 0.0722 × B.
Лучшие практики и ключевые рекомендации
- Стремитесь к минимальному стандарту WCAG AA (контраст от 4.5:1): Для стандартного текста мелкого и среднего размера коэффициент контрастности обязан быть не ниже 4.5:1 для успешного прохождения государственных аудитов доступности.
- Для крупного заголовка (от 18pt или 14pt bold) порог снижен до 3:1: Крупные надписи и элементы управления легче различимы глазом, поэтому минимальный проходной порог для них составляет 3.0:1.
- Учитывайте чтение экранов при ярком солнечном свете: Интерфейсы с пограничным контрастом 4.5:1 становятся полностью нечитаемыми на смартфонах на улице в солнечную погоду. По возможности стремитесь к уровню AAA (7:1).
- Не полагайтесь исключительно на цвет для передачи статуса: Не отмечайте ошибки только красным цветом или успех только зеленым: дублируйте статус текстовыми метками или пиктограммами для людей с протанопией и дейтеранопией.
Часто задаваемые вопросы (FAQ)
В чем разница между уровнями соответствия стандартам WCAG AA и AAA?
Уровень AA — это общемировой правовой стандарт для коммерческих и государственных сайтов (контраст 4.5:1). Уровень AAA — строжайший максимальный стандарт доступности для медицинских и образовательных систем (контраст от 7:1).
Какой максимальный и минимальный коэффициент контрастности возможен в природе?
Минимальный контраст равен 1:1 (абсолютно одинаковые цвета, например белый на белом). Максимально возможный контраст составляет 21:1 (идеально черный `#000000` на идеально белом `#FFFFFF`).
Как быстро повысить контрастность цвета, не меняя его исходный оттенок?
Используйте наш ползунок яркости: достаточно немного затемнить темный цвет или слегка осветлить фоновый цвет в том же цветовом тоне HSL, чтобы преодолеть проходной порог 4.5:1.
Сохраняются ли цветовые палитры моих коммерческих макетов на сервере?
Нет. Все расчеты относительной яркости выполняются на 100% математическим модулем внутри вашего браузера. Никакие дизайн-системы и цвета не покидают ваше устройство.