Проверка доступности цветов — контраст WCAG и симуляция дальтонизма

Бесплатный инструмент проверки контрастности по WCAG 2.1 для тестирования любых цветовых комбинаций на соответствие стандартам доступности. Проверка читаемости текста на уровнях AA и AAA — незаменим для инклюзивного веб-дизайна.

Как использовать

Выберите или введите цвета переднего плана и фона через пикер или HEX/RGB.

Посмотрите предпросмотр текста и результаты проверки WCAG AA/AAA.

Изучите симуляцию дальтонизма — как каждый тип CVD воспринимает ваши цвета.

Если проверка не пройдена, нажмите на предложенную альтернативу для исправления.

Используйте массовый режим для проверки всех комбинаций вашей палитры.

Проверьте контраст WCAG и видимость при дальтонизме

Выберите два цвета для проверки контрастности и видимости при дальтонизме.

Передний план

Фон

Крупный текст (18pt+)

Заголовок

Обычный текст (16px)

Съешь ещё этих мягких французских булок, да выпей чаю.

Основной текст — так ваши пользователи увидят эту цветовую комбинацию в реальном контенте.

Контрастность WCAG 2.1

AA требует 4.5:1 для обычного текста, 3:1 для крупного. AAA — 7:1 / 4.5:1.

12.63:1

AA обычный Пройден

AA крупный Пройден

AAA обычный Пройден

AAA крупный Пройден

Симуляция дальтонизма

Как ваша пара цветов выглядит для людей с разными типами нарушения цветового зрения.

Предложенные альтернативы

Доступные альтернативы, которые проходят WCAG AA и различимы при всех типах дальтонизма.

Массовая проверка палитры

Вставьте 3–10 HEX-цветов (по одному на строку или через запятую) для проверки всех пар.

Особенности

Контрастность WCAG 2.1 с отметками AA/AAA — пройден/не пройден Симуляция дальтонизма для 4 типов CVD (протанопия, дейтеранопия, тританопия, ахроматопсия) Автоматический подбор доступных цветовых альтернатив Массовый режим: проверка всех пар из 3–10 цветов палитры

На развитие сайта Чтобы сайт был бесплатным, поддержите проект, пожалуйста. ♥ Донат

Часто задаваемые вопросы

Что такое контрастность WCAG?

Руководство по доступности веб-контента (WCAG) определяет минимальные коэффициенты контрастности между текстом и фоном. Уровень AA требует 4.5:1 для обычного текста и 3:1 для крупного (18pt+). Уровень AAA — 7:1 и 4.5:1 соответственно. Чем выше коэффициент, тем лучше читаемость.

Что такое дальтонизм (CVD)?

Нарушение цветового зрения (CVD) затрагивает около 8% мужчин и 0,5% женщин. Самые распространённые типы — протанопия (слепота на красный) и дейтеранопия (слепота на зелёный). Этот инструмент показывает, как ваши цвета выглядят для людей с каждым типом.

Как работает автоподбор альтернатив?

Когда пара цветов не проходит WCAG или CVD, инструмент ищет ближайшие цвета, которые проходят все проверки. Он корректирует яркость, сохраняя оттенок, чтобы предложенные цвета соответствовали вашему дизайну и были доступны.

Что такое Delta E и почему это важно?

Delta E (CIE2000) измеряет воспринимаемую разницу между двумя цветами. Delta E менее 1 означает, что два цвета практически неразличимы для глаза. Для доступности мы рекомендуем минимальное значение Delta E 10 между передним планом и фоном при всех типах симуляции CVD.

💡 Хотите, чтобы мы улучшили этот инструмент лично для вас?

Мы можем! И это бесплатно. Просто отправьте нам сообщение с вашим пожеланием. Если хотите обсудить детали — оставьте свою почту, и мы с вами свяжемся. Можно анонимно.

Как вы оцениваете этот инструмент?

Спасибо за вашу оценку!

Изменить оценку

Хотите оставить комментарий?

Хотите рассказать подробнее? Оставьте комментарий!

Спасибо! Ваш комментарий появится после модерации.

Кому подходит этот инструмент

Опубликовано 08 мар 2026 Обновлено 01 мая 2026