Проверка контраста (Contrast Checker)

Проверьте контраст текста перед публикацией

Хороший цветовой контраст — один из самых простых способов сделать сайт удобнее для чтения. Эта проверка контраста сравнивает цвет текста и цвет фона по формуле относительной яркости WCAG, а затем показывает коэффициент контрастности и результаты «пройдено/не пройдено» для уровней AA и AAA. Она полезна для кнопок, навигации, бейджей, карточек, предупреждающих сообщений и любых мест, где текст находится на цветной поверхности.

Расчёт выполняется в вашем браузере и не требует никакой загрузки. Выберите два цвета, при необходимости поменяйте их местами и используйте блок предпросмотра, чтобы увидеть, как выглядит реальный текст. Коэффициент объективен, но предпросмотр всё равно важен, ведь толщина шрифта, размер букв и окружающий макет влияют на читаемость. Пара, формально проходящая проверку, всё равно может утомлять, если текст мелкий или поверхность визуально перегружена.

Как понимать результаты AA и AAA

WCAG AA — обычная цель для большинства сайтов и продуктов. Обычный текст должен достигать как минимум 4,5:1, а крупный — как минимум 3:1. AAA строже: 7:1 для обычного текста и 4,5:1 для крупного. Крупным считается текст от 18 pt обычного или 14 pt полужирного начертания. Более низкий порог существует потому, что более крупные и толстые буквы легче различать при меньшем контрасте, чем мелкий основной текст. Если вы не уверены, к какой категории относится текст, считайте его обычным и ориентируйтесь на более высокое требование.

Проектирование доступных цветовых систем

Контраст нужно проверять рано, а не только после завершения визуального дизайна. Выбирая цвета бренда, проверяйте их на поверхностях, где они действительно появятся: белых карточках, тёмных панелях навигации, приглушённых фонах и отключённых состояниях. Документируйте доступные сочетания как токены, чтобы командам не приходилось открывать их заново. Помните, что контраст — лишь одна из составляющих доступности. Используйте заметные контуры фокуса, понятные подписи, семантический HTML и не полагайтесь только на цвет, чтобы сообщать о важных состояниях, таких как ошибки, успех и предупреждения.