Как пользоваться
- 1Выберите цвет текста и цвет фона.
- 2Посмотрите коэффициент контраста и результаты AA и AAA.
- 3Оцените пример текста в реальном виде.
- 4Если проверка не пройдена, нажмите «Подобрать ближайший цвет».
Требования WCAG
Коэффициент контраста меняется от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом). Уровень AA требует не менее 4,5:1 для обычного текста и 3:1 для крупного (от 18 pt или 14 pt полужирным). Уровень AAA — 7:1 и 4,5:1 соответственно. Эти нормы лежат в основе требований к доступности сайтов, в том числе российского ГОСТ Р 52872.
Почему контраст важен
Бледно-серый текст на белом фоне может выглядеть стильно на мониторе дизайнера, но плохо читается на телефоне на солнце и людьми со слабым зрением. Недостаточный контраст также отмечается в аудите доступности Lighthouse. Кнопка подбора сдвигает светлоту цвета до ближайшего значения, проходящего проверку, сохраняя оттенок.
Частые вопросы
Какой уровень нужен обычному сайту?
AA — общепринятый минимум. AAA желателен для основного текста, но не всегда достижим для фирменных цветов.
Что считается крупным текстом?
Текст от 18 pt (около 24 px) или от 14 pt (около 18,7 px) полужирным.
Проверяет ли инструмент текст на изображениях?
Нет, сравниваются два сплошных цвета. Для текста на фото проверьте самый светлый и самый тёмный участок фона.
Результаты не радуют?
Обратитесь в Webin Agency: быстрые сайты с SEO-оптимизацией, интернет-магазины и ведение Google Ads.