Проверка контраста цветов
Введите цвет переднего плана и фона, чтобы проверить коэффициент контрастности WCAG с бейджами AA и AAA для обычного и крупного текста.
21.00:1
AA
Обычный текст
AA
Крупный текст
AAA
Обычный текст
AAA
Крупный текст
Предпросмотр
Съешь же ещё этих мягких французских булок, да выпей чаю.
Съешь же ещё этих мягких французских булок, да выпей чаю.
Как это работает
Этот инструмент вычисляет коэффициент контрастности двух цветов согласно рекомендациям WCAG 2.1 и показывает, доступна ли ваша цветовая комбинация.
Как использовать:
- Введите цвет текста и цвет фона в шестнадцатеричном формате, RGB или через выбор цвета.
- Инструмент мгновенно отобразит коэффициент контрастности.
- Проверьте, соответствует ли результат уровню AA (4,5:1 для обычного текста) или AAA (7:1).
Пример: чёрный текст (#000000) на белом фоне (#FFFFFF) → коэффициент контрастности 21:1 (AAA).
Ограничения: инструмент оценивает только контраст текста/фона. Он не охватывает все критерии доступности WCAG.
Конфиденциальность: данные не передаются — всё вычисляется локально.
Сценарии использования
- Проверка палитры бренда на соответствие доступности перед запуском редизайна сайта
- Выбор цветов кнопок и ссылок, остающихся читаемыми в тёмной или светлой теме
- Соблюдение требований 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-форматы.