Проверка контраста цветов
Введите цвет переднего плана и фона, чтобы проверить коэффициент контрастности WCAG с бейджами AA и AAA для обычного и крупного текста.
Съешь же ещё этих мягких французских булок, да выпей чаю.
Съешь же ещё этих мягких французских булок, да выпей чаю.
Как это работает
Этот инструмент вычисляет коэффициент контрастности двух цветов согласно рекомендациям WCAG 2.1 и показывает, доступна ли ваша цветовая комбинация.
Как использовать:
- Введите цвет текста и цвет фона в шестнадцатеричном формате, RGB или через выбор цвета.
- Инструмент мгновенно отобразит коэффициент контрастности.
- Проверьте, соответствует ли результат уровню AA (4,5:1 для обычного текста) или AAA (7:1).
Пример: чёрный текст (#000000) на белом фоне (#FFFFFF) → коэффициент контрастности 21:1 (AAA).
Ограничения: инструмент оценивает только контраст текста/фона. Он не охватывает все критерии доступности WCAG.
Конфиденциальность: данные не передаются — всё вычисляется локально.
Практический пример
Проверьте серый текст #767676 на белом фоне: коэффициент контрастности ровно 4,54:1 — проходит WCAG AA для обычного текста (требуется 4,5:1), но проваливает AAA (7:1); карточки результатов показывают каждый порог отдельно, включая смягчённые правила для крупного текста. Логарифмическая шкала показывает, где пара находится между 1:1 и 21:1 чистого чёрного на белом. Карточка APCA даёт превью метрики WCAG 3, а кнопка обмена мгновенно отвечает, поможет ли инверсия текста и фона. Живой предпросмотр выводит настоящий текст — судите собственными глазами.
Сценарии использования
- Проверка палитры бренда на соответствие доступности перед запуском редизайна сайта
- Выбор цветов кнопок и ссылок, остающихся читаемыми в тёмной или светлой теме
- Соблюдение требований WCAG 2.1 AA или AAA для соответствия Section 508, EN 301 549 или ADA
- Проверка макета от дизайнера, чтобы отметить нечитаемый текст до начала разработки
- Обучение доступности, показывая, как небольшие различия яркости вызывают большие проблемы с контрастом
Часто задаваемые вопросы
- Что такое коэффициент контрастности WCAG?
- Отношение, рассчитанное на основе относительной яркости двух цветов — от 1:1 (нет контраста) до 21:1 (максимальный контраст).
- Каково минимальное значение для доступности?
- 4,5:1 для обычного текста (уровень AA) и 3:1 для крупного текста.
- Что означает уровень AAA?
- Отношение 7:1, рекомендуемое для максимальной доступности.
- Можно ли тестировать несколько комбинаций?
- Да, изменяйте цвета — результат обновляется в реальном времени.
- Поддерживается ли формат HSL?
- Ввод принимает шестнадцатеричный и RGB-форматы.