Проверка контрастности цветов
Тестирование соответствия контрастности WCAG 2.1 AA/AAA для доступного веб-дизайна
Проверка контрастности цветов
Предварительный просмотр
Доступные альтернативы
Все уровни контрастности пройдены! Рекомендации не требуются.
Требования WCAG 2.1
| Уровень | Обычный | Крупный |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Возможности
Соответствие WCAG 2.1
Тестирование уровней AA и AAA для обычного и крупного текста по официальным рекомендациям WCAG 2.1
Предварительный просмотр
Просматривайте цветовую комбинацию в реальном времени с образцами текста разных размеров
Умные рекомендации
Автоматическое предложение доступных цветовых альтернатив при несоответствии требованиям контрастности
Конфиденциальность
Все вычисления выполняются локально в вашем браузере, данные не отправляются на серверы
Как использовать?
Выберите цвета
Введите цвет переднего плана (текст) и фона с помощью палитры или поля ввода HEX.
Проверьте результаты
Посмотрите коэффициент контрастности и статус соответствия WCAG AA/AAA для обычного и крупного текста.
Примените рекомендации
Если контрастность не проходит, нажмите на предложенный доступный цвет для мгновенного применения.
Часто задаваемые вопросы
Что такое проверка контрастности цветов?
Инструмент, который показывает, соответствуют ли ваши цвета текста и фона стандартам доступности WCAG 2.1. Выберите два цвета и мгновенно узнайте, проходят ли они уровни AA и AAA для обычного и крупного текста. При несоответствии инструмент предложит доступные альтернативы, которые можно применить одним нажатием.
Почему контрастность важна
Недостаточная контрастность цветов — одна из самых распространённых проблем доступности в вебе. Она затрагивает людей со слабым зрением, дальтонизмом и даже пользователей на ярком солнце. Соблюдение стандартов WCAG — это не только хорошая практика, но и часто юридическое требование для публичных сайтов.
Как использовать
Введите цвета переднего плана и фона с помощью HEX-кодов или палитры. Инструмент мгновенно рассчитает коэффициент контрастности и покажет результат для каждого уровня WCAG. Если контрастность слишком низкая, посмотрите раздел рекомендаций для доступных цветовых альтернатив с похожим внешним видом.
Советы для дизайнеров
Проверяйте цветовую палитру на ранних этапах дизайна, а не после создания сайта. Тёмный текст на светлом фоне обычно работает хорошо. Не полагайтесь только на цвет для передачи информации. Помните, что крупный текст (18px+ обычный или 14px+ жирный) имеет менее строгие требования к контрастности.
Конфиденциальность
Всё работает в вашем браузере. Данные о цветах не отправляются на сервер. Без регистрации, без отслеживания.