Проверка контраста цвета с фоном
Два HEX, отношение яркости и уровни AA и AAA для обычного и крупного текста.
Как читать результат проверки
Число на карточке — отношение относительной яркости текста и фона. Оно считается для пары в полях сразу. Крупный заголовок выдерживает более низкое отношение, обычный набор — нет.
Кнопка «Подобрать цвет текста по фону» перебирает чёрный, белый, серые и оттенки круга, затем уточняет кандидатов в OKLCH. «Подобрать фон по тексту» делает то же самое в обратную сторону, если цвет строки уже выбран.
Куда унести проверенную пару
- Пипетка по изображению снимает HEX с фото, а эта страница проверяет, читается ли он на фоне.
- Каталог цветов открывает страницу оттенка и соседние варианты.
- Генератор палитр собирает набор, в котором текст и фон уже разведены по ролям.
- Визуализация цветовой палитры показывает ту же пару на макете.
- Цветовой круг подбирает соседние сочетания к найденному оттенку.
Как проверить пару
- Введите HEX текста и фона или возьмите их пипеткой.
- Отношение и уровни AA и AAA появятся на карточке оценки.
- «Поменять местами» проверяет обратную комбинацию.
- «Копировать ссылку» сохраняет оба цвета в адресе, например /tools/contrast/112a46-acc8e5.
Часто задаваемые вопросы
Что считается хорошим контрастом?
Для обычного текста минимум 4.5:1 (уровень AA), для крупного — 3:1. Уровень AAA начинается с 7:1.
Как читать число контраста, например 8.42:1?
Это отношение относительной яркости двух цветов. 1:1 значит, что яркости совпали. Чем больше число, тем легче читать текст на этом фоне.
Почему белый или чёрный текст не всегда лучший выбор?
Они часто дают высокое отношение, но могут спорить с остальной палитрой. Подбор оставляет и нейтральные, и цветные варианты, которые остаются читаемыми.
Что такое WCAG AA и AAA?
WCAG — рекомендации по доступности контента. AA — обычный минимум для сайтов. AAA — более строгий порог.
Как использовать результат в макете?
Возьмите пару, которая проходит нужный уровень, и проверьте её на реальном размере текста. Крупный заголовок и набор 16 px читаются по разным порогам.