Проверка контраста цвета

Проверьте контраст цветов WCAG прямо в браузере

Этот инструмент проверки контраста цветов измеряет соотношение контраста WCAG между цветом текста и цветом фона и мгновенно сообщает, проходит ли пара уровни AA и AAA для обычного текста, крупного текста и компонентов интерфейса. Введите HEX-значение, отредактируйте поля RGB или HSL, перетащите ползунок яркости или воспользуйтесь пипеткой для захвата любого цвета с экрана — соотношение, матрица результатов и живой предварительный просмотр обновляются в режиме реального времени.

Инструмент работает по той же формуле WCAG, что WebAIM и Adobe Color, которым доверяют дизайнеры, но дополнительно предлагает живой читаемый предпросмотр, оценку APCA (WCAG 3) и исправление проблемных пар в один клик. Все вычисления выполняются локально в браузере: ваши цвета никогда не покидают устройство, и регистрация не требуется.

Пороги WCAG AA и AAA: подробное объяснение

Соотношение контраста WCAG варьируется от 1:1 (два одинаковых цвета) до 21:1 (чёрный на белом). Уровень AA — стандарт, требуемый большинством законов, таких как ADA и Секция 508, — предполагает 4,5:1 для обычного текста и 3:1 для крупного текста. Уровень AAA повышает эти значения до 7:1 и 4,5:1. Крупным считается текст от 18pt (24px) и выше, или от 14pt (около 18,66px) полужирного начертания.

Матрица результатов разбивает каждый порог отдельно, чтобы вы видели с первого взгляда, что серый #767676 на белом проходит AA для основного текста с 4,54:1, но не дотягивает до 7:1, нужных для AAA. Если команда обязана соответствовать правовым требованиям (ADA, EN 301 549, Секция 508), AA — это минимальная планка. AAA стоит стремиться в читательских интерфейсах, где важна доступность для слабовидящих.

Предпросмотр, исправление и публикация доступных цветовых пар

Цифры — лишь половина картины, поэтому живой предпросмотр отображает реальные заголовки, основной текст, мелкий шрифт, а также образец кнопки и чипа в ваших цветах — убедитесь в читаемости на практике, а не только по цифре соотношения. Когда пара не проходит, функция «Сделать проходящей» сохраняет оттенок и насыщенность, корректируя яркость до ближайшего цвета, который преодолевает выбранный уровень (AA, AA крупный текст или AAA), и применяет его одним кликом. Можно скорректировать либо текст, либо фон — по вашему усмотрению.

Попарная сетка принимает целую палитру и сразу показывает, какие цветовые комбинации проходят проверку, — удобно при создании дизайн-системы, в которой каждая пара «передний план/фон» должна быть безопасной. Вместо того чтобы тестировать десятки пар по одной, вставьте палитру один раз и мгновенно получите полную матрицу.

APCA: предварительный просмотр контраста WCAG 3

Помимо классического соотношения, проверщик показывает оценку APCA Lc — перцептивную метрику контраста, предложенную для WCAG 3. APCA моделирует, как глаз в действительности воспринимает светлый текст на тёмном фоне в сравнении с тёмным на светлом, и учитывает насыщенность шрифта, выявляя проблемы читаемости, которые соотношение WCAG 2 порой упускает. Ориентиры: Lc 75+ для основного текста, Lc 60+ для крупного текста, Lc 45+ для больших заголовков.

WCAG 3 всё ещё в статусе черновика и не заменил WCAG 2.2, поэтому соответствие требованиям сегодня означает выполнение порогов 4,5:1 и 3:1. Отображение APCA рядом с текущими соотношениями позволяет подготовить палитру к будущему, не ожидая финализации стандарта.

Нетекстовый контраст для иконок и компонентов интерфейса

Контраст нужен не только тексту. WCAG 2.1 SC 1.4.11 требует 3:1 контраста для границ интерактивных компонентов — рамок полей ввода, индикаторов фокуса, состояний переключателей — и для значимых иконок и графики. Матрица включает отдельную строку для проверки UI и графики по порогу 3:1, что позволяет убедиться в видимости контура кнопки или иконки.

Это область, в которой многие команды проваливают аудиты, не подозревая об этом. Светло-серая рамка поля ввода (#D1D1D1 на белом даёт 1,4:1) — типичное нарушение WCAG 2.1 даже при условии, что весь текст на странице проходит проверку. Проверить компоненты интерфейса здесь займёт несколько секунд и предотвратит неприятные сюрпризы при формальном аудите.

Сравнение с WebAIM, Adobe Color и Chrome DevTools

Проверщик контраста WebAIM на webaim.org — наиболее цитируемый бесплатный инструмент доступности, использующий ту же формулу WCAG 2. Однако он не показывает APCA, не имеет живого текстового предпросмотра, не может автоматически исправлять неудачные пары и не поддерживает попарную сетку палитры.

Инструменты доступности Adobe Color показывают результаты AA/AAA и включают симулятор цветовой слепоты, но для сохранения работы требуется бесплатный аккаунт Adobe, а автоматического подбора проходного цвета нет.

Chrome DevTools имеет значок соотношения контраста в выборщике цветов панели «Элементы», удобный для проверки в браузере, — но только внутри DevTools, без возможности поделиться ссылкой на конкретную цветовую пару.

Данный инструмент работает без входа в систему, отображает соотношения WCAG 2 и оценку APCA Lc одновременно, рендерит живой предпросмотр в выбранных цветах и позволяет тестировать полную сетку палитры в одном представлении. Все вычисления выполняются локально в JavaScript.