Проверить контраст текста и фона — WCAG онлайн
hanproject.ru

Контраст текста и фона

Выберите два цвета — скажу, читается ли текст на таком фоне.

—

Обычный текст, 16 пикселей. Так выглядит абзац на выбранном фоне.

Крупный заголовок

Пороги, если коротко
4,5:1
Обычный текст, уровень AA. Это тот минимум, который обычно требуют.
3:1
Крупный текст (от 24 px, или от 18,5 px полужирным), а также границы полей, значки и элементы управления.
7:1
Уровень AAA для обычного текста. Нужен редко, но для длинных текстов приятен глазу.
Серый на белом
Самая частая ошибка: #999 на белом даёт 2,8:1 и не проходит даже AA. Светло-серые подписи под полями почти всегда нечитаемы.

Частые вопросы

Что означает 4,5:1?

Во столько раз светлее один цвет другого. Порог 4,5:1 — это уровень AA для обычного текста: ниже него текст тяжело читать на солнце и людям со слабым зрением.

Почему для крупного текста порог ниже?

Толстые крупные буквы различимы при меньшем контрасте, поэтому для них достаточно 3:1. Крупным считается от 24 px, а для полужирного — от 18,5 px.

Нужно ли проверять кнопки и иконки?

Да. Для границ полей, значков и прочих нетекстовых элементов порог 3:1 — иначе поле ввода не видно на фоне.

рядом
<- все инструменты поиск словарь данные и статистика