Что это такое
Это бесплатный онлайн-инструмент для мгновенной проверки контрастности двух цветов по стандарту WCAG 2.1. Вместо того чтобы гадать, читабелен ли текст на конкретном фоне, вы получаете точное числовое соотношение контраста (contrast ratio) и вердикт о соответствии уровням AA или AAA. Сервис работает как с HEX, так и с RGB значениями, а живой предпросмотр позволяет сразу увидеть, как будет выглядеть ваш текст в реальных условиях.
Как пользоваться
- Откройте инструмент в браузере — он не требует установки и работает на любом устройстве.
- Выберите формат ввода — HEX или RGB, переключившись в соответствующую вкладку.
- Задайте цвет текста (передний план) и цвет фона — используйте поля ввода или пипетку для выбора из палитры.
- Изучите результат — инструмент мгновенно покажет коэффициент контрастности (например, 4.5:1) и отметит, проходит ли пара уровни WCAG AA и AAA.
- Воспользуйтесь рекомендациями — если контраст недостаточен, сервис подскажет, насколько нужно затемнить или осветлить один из цветов для достижения нужного соотношения.
- Скопируйте исправленные значения — после корректировки вы можете забрать готовые HEX или RGB коды для использования в проекте.
Кому и когда пригодится
- Веб-дизайнерам и UI/UX-специалистам — при подборе палитры для сайтов и приложений, чтобы избежать претензий по доступности на этапе макета.
- Верстальщикам и фронтендерам — для проверки готовых стилей и быстрой подгонки цветов под требования заказчика.
- Контент-менеджерам и маркетологам — при создании баннеров и постов в соцсетях, где важно, чтобы текст был различим на любом фоне.
- Специалистам по тестированию — для аудита уже существующих страниц на соответствие стандарту WCAG.
- Владельцам сайтов — чтобы убедиться, что контент доступен людям с ослабленным зрением, и избежать юридических рисков.
Плюсы и ограничения
Плюсы:
- Мгновенный расчёт и понятная индикация прохождения уровней AA и AAA.
- Живой предпросмотр — сразу видно, как сочетание выглядит на экране.
- Поддержка двух популярных форматов — HEX и RGB без конвертации.
- Практичные рекомендации по исправлению контраста, а не просто сухие цифры.
- Полностью бесплатно и без ограничений на количество проверок.
Ограничения:
- Проверяет только пары «текст-фон», но не учитывает сложные случаи вроде градиентов или изображений.
- Не оценивает другие аспекты доступности, такие как размер шрифта или различимость состояний кнопок.
- Результат зависит от точности выбранных цветов — монитор с неправильной калибровкой может исказить восприятие.
Частые вопросы
Что означают уровни AA и AAA?
AA — базовый уровень доступности, обязательный для большинства сайтов. Для обычного текста нужно соотношение не менее 4.5:1, для крупного — 3:1. AAA — повышенный стандарт: для обычного текста требуется 7:1, для крупного — 4.5:1. Инструмент проверяет сразу оба уровня.
Могу ли я использовать инструмент для проверки контраста в логотипах?
Логотипы и декоративные элементы не обязаны соответствовать WCAG, если они не несут смысловой информации. Но если внутри логотипа есть текст, который должен быть читаемым, проверка не помешает.
Почему белый текст на белом фоне показывает ошибку?
Потому что соотношение контраста в этом случае равно 1:1 — это самый низкий показатель. Текст полностью сливается с фоном. Инструмент честно покажет, что такой вариант не проходит даже минимальные требования.
Инструмент работает только с веб-цветами?
Нет, вы можете вводить любые HEX-коды и RGB-значения из графических редакторов. Точность расчёта от этого не меняется, так как формула WCAG универсальна.
Как быстро исправить недостаточную контрастность?
Посмотрите на рекомендации инструмента — он подскажет направление изменения цвета. Обычно достаточно сдвинуть ползунок яркости на 10–20% в нужную сторону, чтобы достичь целевого соотношения. После этого скопируйте новый код и примените его в проекте.