Бесплатный инструмент
Проверка контраста цветов
Проверьте, соответствует ли комбинация цветов вашего сайта стандартам WCAG 2.1/2.2.
Коэффициент контраста
6.29:1
Предпросмотр
Пример текста на вашем фоне
WCAG 2.1/2.2 — Web Content Accessibility Guidelines
| Размер текста | AA (минимум) | AAA (улучшенный) |
|---|---|---|
| Обычный текст | Пройдено | Не пройдено |
| Крупный текст (18px+ bold) | Пройдено | Пройдено |
WCAG 2.1 Критерий 1.4.3 (AA): минимум 4.5:1 для текста, 3:1 для крупного текста.
Что такое контраст цветов
Коэффициент контраста измеряет разницу яркости между текстом и фоном — от 1:1 (нет контраста) до 21:1 (чёрное на белом). Недостаточный контраст — самая частая ошибка WCAG в вебе: он делает контент нечитаемым для людей со сниженным зрением, дальтонизмом и любого, кто смотрит на экран телефона под солнцем. Соответствие порогам контраста WCAG — базовое требование Европейского акта о доступности (EAA), ADA и стандарта EN 301 549.
Как пользоваться проверкой контраста
Выберите или вставьте цвет текста и цвет фона. Инструмент мгновенно рассчитывает коэффициент контраста по WCAG и показывает, проходит ли пара уровни AA и AAA для обычного и крупного текста. Меняйте цвета, пока все проверки не станут «пройдено», и используйте эти значения в вашем CSS.
Частые вопросы о контрасте
Какой коэффициент контраста достаточен по WCAG?
Для уровня AA (WCAG 2.1/2.2) нужно минимум 4.5:1 для обычного текста и 3:1 для крупного (24px или 18.66px жирным). Уровень AAA повышает требования до 7:1 и 4.5:1 соответственно.
Чем отличаются уровни AA и AAA?
AA — стандартный уровень, которого требует большинство законов о доступности (EAA, ADA, EN 301 549). AAA — повышенный уровень для максимальной читаемости. Стремитесь к AA везде и к AAA где возможно.
Действует ли правило контраста для крупного текста?
Да, но с более низким порогом. Текст от 24px (или 18.66px жирным) на уровне AA требует лишь 3:1 (4.5:1 на AAA).
Нужен ли контраст для иконок и элементов интерфейса?
Да. Критерий WCAG 1.4.11 требует контраста 3:1 для интерактивных элементов (кнопки, границы полей, состояние фокуса) и значимой графики относительно соседних цветов.
Эта проверка контраста бесплатна?
Да — инструмент работает полностью в вашем браузере, не требует регистрации и бесплатен для неограниченного числа проверок.
Сделайте сайт доступным за 3 минуты
7 дней бесплатно. Все 3 продукта. Без кредитной карты. Мгновенный результат.