◐

Проверка контрастности цветов

Проверьте коэффициент контрастности по WCAG между цветом текста и фона с результатами AA/AAA.

Ваши файлы остаются на этом устройстве

Файлы обрабатываются в браузере и не отправляются на сервер. Сайт загружает код и ресурсы для работы инструментов. Без аккаунтов и трекеров.

Нажмите «Скачать», чтобы сохранить инструмент одним HTML-файлом для работы офлайн.

Конфиденциальность →

Цвет текста

Фон

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

Крупный образец текста

Попробуйте разобранный пример

Пример

Задайте цвет текста #767676 и фон #ffffff. Коэффициент равен 4.54:1 — это проходит AA для обычного текста. На тон светлее, #777777, даёт 4.48:1 и не проходит, потому что AA требует не менее 4,5:1 для обычного текста.

Учтите

Крупному тексту (около 24px или 18,7px жирным) для AA достаточно 3:1. Коэффициент не учитывает тонкие шрифты, текст поверх изображений и прозрачность, поэтому проверяйте и реальный макет и не передавайте смысл одним только цветом.

Об этом инструменте

Сравните цвет переднего плана и фона, чтобы увидеть коэффициент контрастности по WCAG и пройдены ли уровни AA и AAA — всё вычисляется локально в браузере.

Часто задаваемые вопросы

Что считается крупным текстом?

WCAG считает крупным текст размером 18pt (24px) или 14pt (18.66px) полужирным, которому достаточно меньшего коэффициента 3:1 для AA.

Какие коэффициенты проходят проверку?

Обычному тексту нужно 4.5:1 для AA и 7:1 для AAA; крупному тексту — 3:1 для AA и 4.5:1 для AAA.