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