Что такое ContrastChecker.com
ContrastChecker.com — это бесплатный онлайн-инструмент, который мгновенно проверяет цветовую пару на соответствие стандартам доступности WCAG. Вместо того чтобы вручную высчитывать коэффициенты контрастности или гадать, увидит ли текст человек с дальтонизмом, вы просто вводите два цвета — и сервис выдаёт вердикт: проходят они уровни AA или AAA или нет.
Инструмент работает с любыми форматами: HEX, RGB, HSL и даже с названиями цветов. При этом он не просто показывает сухие цифры, а сразу оценивает, подходит ли контраст для обычного текста, крупного текста или некстовых элементов интерфейса. Это своего рода «ревизор» доступности, который встраивается в рабочий процесс дизайнера за пару секунд.
Ключевые возможности
- Автоматический расчёт коэффициента контрастности по формуле WCAG с точностью до сотых.
- Оценка для трёх сценариев: обычный текст, крупный текст (от 18pt или 14pt жирного), а также UI-компоненты и графические элементы.
- Проверка уровней AA и AAA — от базового соответствия до «золотого стандарта» доступности.
- Режим имитации дальтонизма: сервис показывает выбранные цвета в оттенках серого, помогая оценить читаемость для людей с цветовой слепотой.
- Наглядная шкала-слайдер: можно двигать ползунок и в реальном времени видеть, как изменение одного цвета влияет на итоговый контраст.
- Копирование результатов в один клик — готовое значение коэффициента или код цвета для вставки в макет.
Кому подойдёт
Инструмент станет ежедневным помощником для UI/UX-дизайнеров, которые проектируют интерфейсы и хотят заранее избежать проблем с доступностью. Особенно полезен он при работе над государственными сайтами, банковскими приложениями или образовательными платформами, где требования к контрасту критичны.
Веб-разработчикам сервис пригодится для быстрой проверки CSS-переменных и токенов дизайн-системы. Можно проверить десятки комбинаций за минуту и сразу отбраковать неудачные.
Также подойдёт контент-менеджерам и маркетологам, которые создают email-рассылки, лендинги или презентации — чтобы текст на цветных плашках гарантированно читался. Наконец, это незаменимая вещь для QA-специалистов, проверяющих соответствие продукта стандартам WCAG перед релизом.
Плюсы и минусы
Плюсы:
- Полностью бесплатный, без регистрации и ограничений по количеству проверок.
- Мгновенный результат — не нужно нажимать кнопки, всё считается в реальном времени.
- Понятный интерфейс даже для новичков: не требует знания формул WCAG.
- Дополнительный тест на дальтонизм, которого нет у большинства аналогов.
- Работает на любых устройствах, включая мобильные.
Минусы:
- Нет возможности загрузить изображение и проверить контраст пикселей на реальном макете.
- Отсутствует функция сохранения истории проверок — всё сбрасывается при обновлении страницы.
- Не поддерживает градиенты и полупрозрачные цвета (только сплошные).
Частые вопросы
Чем отличаются уровни AA и AAA?
AA — это минимальный стандарт доступности, которому должны соответствовать практически все сайты. Для обычного текста нужен коэффициент от 4.5:1, для крупного — от 3:1. AAA — повышенный стандарт: для обычного текста требуется уже 7:1, для крупного — 4.5:1. ContrastChecker.com сразу показывает, какому уровню соответствует ваша пара цветов.
Как правильно использовать тест на дальтонизм?
Сервис переводит цвета в оттенки серого, имитируя, как их видит человек с полной цветовой слепотой. Если после этого преобразования текст и фон сливаются — значит, даже без проблем с цветовосприятием текст будет плохо читаться при переводе в чёрно-белый режим. Это полезно, например, при создании печатных материалов.
Почему сервис ругает мой «красивый» светло-серый текст на белом фоне?
Потому что светло-серый имеет очень низкий контраст с белым — часто около 2:1. Для обычного текста нужно минимум 4.5:1. Это не ошибка сервиса, а физика восприятия: при слабом контрасте глаза быстрее устают, а людям с плохим зрением текст становится почти нечитаемым. Рекомендуется затемнять текст или выбирать более тёмный оттенок серого.
Можно ли проверить контраст для логотипа или иконки?
Да, но с оговоркой. WCAG требует для графических объектов коэффициент не ниже 3:1. Просто выберите цвет логотипа и цвет фона, и сервис покажет, подходит ли пара для некстовых элементов. Если логотип содержит несколько цветов, проверяйте каждую пару отдельно.