Проверка контрастности цветов (WCAG)
Проверьте, достаточно ли контрастен цвет текста на фоне по правилам доступности WCAG AA и AAA, с живым предпросмотром.
Как пользоватьсяПроверить контрастность цветов
Пример крупного текста
Пример обычного текста: доступность помогает всем лучше читать на любом экране.
Мелкий текст, например подписи и нижние колонтитулы.
Доступно на: 
Проверка контрастности цветов (WCAG): для чего нужен
Выберите цвет текста и фона, чтобы увидеть коэффициент контраста и то, проходит ли он критерии доступности WCAG для обычного текста, крупного текста и значков. Предпросмотр показывает, как выглядит текст разных размеров.
Принимает цвета в шестнадцатеричном формате (#RRGGBB или #RGB) и имеет кнопку для инвертирования цветов.
Как пользоваться
- Выберите или введите цвет текста.
- Выберите цвет фона.
- Посмотрите контраст и уровни AA и AAA.
Когда использовать
- Проверить цвета сайта или приложения.
- Выбрать цвет кнопок и ссылок.
- Исправить замечания по доступности из Lighthouse.
Частые вопросы
Какой минимальный контраст рекомендуется?
По WCAG уровня AA обычному тексту нужно не менее 4,5:1, а крупному (от 24 px или 18,66 px полужирным) — 3:1. На уровне AAA минимумы повышаются до 7:1 и 4,5:1.
Почему контраст важен?
Текст с низким контрастом трудно читать людям с плохим зрением, дальтонизмом или при использовании телефона на солнце. Кроме того, инструменты SEO и доступности указывают на эту проблему.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.