Проверьте контраст — WCAG AA / AAA
Бесплатная проверка контраста WCAG: hex переднего плана и фона против AA и AAA.Runs locally in your browser; files never leave your device.Runs locally in your
Sample text Aa
Контрастность: 3.15:1
AA обычный текст (≥4.5)Не пройдено
AA крупный текст (≥3)Пройдено
AAA обычный текст (≥7)Не пройдено
Подсказка: затемните передний план или осветлите фон — так проще дотянуть до AA.
Приватно · Быстро · Бесплатно
Коэффициент контраста — базовая метрика доступности. Выше число — яснее текст на фоне. WCAG задаёт разные планки для основного текста и крупных жирных заголовков.
Это быстрая дизайн-проверка, не полный аудит — порядок фокуса, скринридеры и клавиатурные пути тоже важны.
Когда фирменные цвета очень светлые, затемните текст или добавьте подложку, вместо того чтобы просить пользователей щуриться.
Как проверить
- Введите hex переднего плана и фона
- Прочитайте коэффициент и подсказки AA/AAA
- Подстраивайте цвета, пока не достигнете цели
Что ловят проверки контраста
- Меньше нагрузки для слабовидящих читателей.
- Меньше кругов дизайн-ревью из-за нечитаемых серых.
- Цифры закрывают споры «мне кажется, нормально».
Сценарии
- Подпись кнопки против цвета заливки
- Ссылки в футере светло-серым
- Текст тёмной темы на тонированных панелях
Советы
- Основной текст имеет более строгие пороги, чем крупный display — всё равно целитесь выше.
- Иконкам тоже нужен различимый контраст.
- На градиентах берите цвет реально под текстом.
Ориентир
| Ввод | Вывод | Примечание |
|---|---|---|
| Тёмный текст на белом | Обычно проходит AA | Типичный основной текст |
| Светло-серый на белом | Часто не проходит | Затемните текст или фон |
Частые вопросы о контрасте
- AA vs AAA?
- AAA строже. Многие продукты целятся минимум в AA; AAA — когда можете.
- Что считается крупным текстом?
- Примерно больший обычный размер или жирный умеренного размера — страница применяет распространённые пороги.
- Дальтоники?
- Контраст помогает, но не полагайтесь только на цвет для передачи состояния.