Проверка контраста цветов (WCAG)
Проверьте контрастность цветов по стандарту WCAG 2.1 для доступности сайта
Проверка контраста WCAG — доступность цветов онлайн
Онлайн инструмент для проверки контрастности цветов по стандарту WCAG 2.1 (Web Content Accessibility Guidelines). Считает коэффициент контраста между текстом и фоном, проверяет соответствие уровням AA и AAA, моделирует восприятие при дальтонизме, предлагает близкие цвета для прохождения нужного порога.
- Коэффициент контраста по WCAG 2.1 (формула luminance)
- Проверка WCAG AA: обычный текст ≥ 4,5:1, крупный ≥ 3:1, UI ≥ 3:1
- Проверка WCAG AAA: обычный ≥ 7:1, крупный ≥ 4,5:1
- Ввод в HEX или RGB + системный color picker
- Симуляция 4 типов дальтонизма (протанопия, дейтеранопия, тританопия, ахроматопсия)
- Подсказки по подбору цвета для прохождения AA / AAA
- Живой предпросмотр с регулировкой кегля и насыщенности
- Готовые пары цветов и копирование CSS
Что такое WCAG
WCAG — международный стандарт доступности веб-контента. Требования к контрасту: AA (минимум) — 4,5:1 для обычного текста, 3:1 для крупного (18pt+ или 14pt bold). AAA (рекомендуемый) — 7:1 и 4,5:1 соответственно.
Коэффициент 1:1 — нет контраста (белый на белом). 21:1 — максимум (чёрный на белом). Значения < 3:1 — нечитаемо для 10% населения (нарушения зрения).
Зачем проверять контраст
Доступность: 15% населения имеют нарушения зрения. Низкий контраст = нечитаемый текст для миллионов. Юридические требования: в ЕС (EAA) и США (ADA) доступность обязательна для госсайтов и публичных сервисов. SEO: Google учитывает доступность как фактор ранжирования. UX: высокий контраст = лучшая читаемость для ВСЕХ, не только для людей с нарушениями.
Пример из жизни
Дизайнер выбирает цвет текста на светло-голубом фоне (#E3F2FD). Предлагает серый (#90A4AE) — «выглядит стильно». Нужно проверить контраст.
Ввёл: текст #90A4AE на фоне #E3F2FD
Контраст: 2,8:1 — НЕ проходит AA (нужно 4,5:1)
Попробовал темнее: #546E7A → контраст 5,2:1 — проходит AA, не проходит AAA
Сменил серый на #546E7A (контраст 5,2:1) — проходит WCAG AA. Визуально почти так же «стильно», но читаемо для людей с нарушениями зрения. Без проверки 10% пользователей не смогли бы прочитать текст.
Знаете ли вы?
15% населения Земли (1,2 млрд) имеют нарушения зрения. 4,5% мужчин — дальтоники. Контраст 4,5:1 обеспечивает читаемость для 95%+ людей
Чёрный на белом: контраст 21:1 (максимум). Тёмно-серый (#333) на белом: 12,6:1. Светло-серый (#999) на белом: 2,8:1 — НЕ проходит WCAG
С 2025 в ЕС (European Accessibility Act) доступность обязательна для всех онлайн-магазинов и сервисов. Штрафы за несоответствие: до 2% от оборота
Чисто белый текст на жёлтом фоне: контраст 1,1:1 — практически невидим. Жёлтый — самый проблемный цвет для контраста с белым
На мобильных контраст ещё важнее: блики, солнечный свет, маленький экран. Apple Human Interface Guidelines требует контраст ≥ 4,5:1 для всех элементов
Крупный текст (18pt / 14pt bold) может иметь контраст 3:1 (AA) — глаз легче различает крупные символы. Мелкий текст — строже: 4,5:1
Требования WCAG к контрасту
| Элемент | WCAG AA (мин.) | WCAG AAA (рекоменд.) | Пример |
|---|---|---|---|
| Обычный текст (< 18pt) | 4,5:1 | 7:1 | #595959 на #FFFFFF = 7,0:1 ✓ |
| Крупный текст (≥ 18pt) | 3:1 | 4,5:1 | #757575 на #FFFFFF = 4,6:1 ✓ AA |
| UI-элементы (кнопки) | 3:1 | — | Границы, иконки |
| Логотипы | Нет требований | — | Декоративный текст |
| Плейсхолдеры | 3:1 (неофициально) | — | Серый на белом |
Важно знать
Быстрое правило: чёрный/белый текст проходит WCAG на ЛЮБОМ фоне. Если нужен цветной текст: проверьте контраст. Светло-серый (#999) на белом — НЕ проходит (2,8:1). Минимум для AA: #757575 на белом (4,6:1). Всегда проверяйте — глаз обманывает.
Как использовать Проверка контраста цветов (WCAG)
Выберите цвет текста и фона
HEX-кодом, RGB или через системный color picker. Кнопка «Поменять» меняет текст и фон местами.
Получите коэффициент мгновенно
Расчёт обновляется при каждом изменении. Большая цифра вверху и шкала 1–21 показывают значение, ниже — таблица всех 5 критериев WCAG с галочками pass/fail.
Проверьте на дальтонизме
Кнопка «Симуляция нарушений цветовосприятия» показывает, как пара будет восприниматься при 4 типах дальтонизма, и пересчитывает контраст для каждого.
Подберите проходящий цвет
Если не проходит AA или AAA — кликните по предложенному цвету в блоке «Рекомендации». Цвет применится автоматически и сразу пройдёт нужный порог.
Примеры использования
Чёрный (#000) на белом (#FFF)
Контраст 21:1. Максимум. Проходит AA и AAA. Но может быть «жёстким» для глаз — #333 на #FFF = 12,6:1 (тоже отлично)
Серый (#999) на белом
Контраст 2,8:1. НЕ проходит AA (< 4,5:1). Нечитаемо для 10% пользователей. Решение: #757575 (4,6:1)
Белый (#FFF) на голубом (#2196F3)
Контраст 3,3:1. Проходит AA для крупного текста (≥ 3:1), НЕ проходит для обычного (< 4,5). Решение: #E3F2FD на #1565C0 = 7,2:1
Тёмная тема: светло-серый на тёмном
#B0BEC5 на #263238 = 6,7:1. Проходит AA и AAA для крупного. Для обычного текста: используйте #ECEFF1 (10,2:1)
Красный (#F44336) на белом
Контраст 3,9:1. НЕ проходит AA для обычного текста. Ярко-красный — проблемный цвет для контраста. Решение: #C62828 = 7,4:1 (темнее)
Часто задаваемые вопросы
Что такое коэффициент контраста?
Крупный текст — это сколько?
Обязательно ли соответствовать WCAG?
AA или AAA — к чему стремиться?
Как проверить всю страницу?
Чем WCAG 2.1 отличается от APCA / WCAG 3.0?
Тёмная тема сложнее для доступности?
Полезная информация
🔒 Конфиденциальность. Расчёт выполняется в браузере — цвета не отправляются на сервер.
♿ Для доступности. 15% населения имеют нарушения зрения. Контраст ≥ 4,5:1 = читаемый текст для 95%+ людей. 30 секунд на проверку = доступный сайт.
Связанные инструменты
После проверки контраста часто нужны другие инструменты для дизайна:
Комментарии
Пока нет комментариев
Будьте первым!