Инструмент использует официальную формулу относительной яркости WCAG, поэтому его результаты совпадают с данными WebAIM и большинства аудитов доступности. Всё работает прямо в браузере - цвета никуда не передаются, лимитов нет.
Проверка контрастности цвета
Работает прямо в браузере - без загрузки файлов и регистрации.
Соотношение контрастности
Пройденотребуется 4.5:1
Пройденотребуется 3:1
Не пройденотребуется 7:1
Пройденотребуется 4.5:1
Крупный = 18 пт (24 пкс) или 14 пт (18,66 пкс) жирным.
Что такое проверка контрастности цвета?
Проверка контрастности цвета измеряет соотношение яркостей цвета текста и фона и показывает, соответствует ли пара стандартам доступности WCAG. Инструмент возвращает коэффициент от 1:1 до 21:1, а затем отображает результат - пройден или не пройден тест AA и AAA для обычного и крупного текста.
Как пользоваться
- 1Введите цвета. Укажите hex-код, значение rgb() или CSS-название цвета для текста и фона - либо выберите цвета через палитру.
- 2Смотрите на коэффициент. Соотношение контрастности обновляется в реальном времени вместе с предпросмотром текста на выбранном фоне.
- 3Проверьте значки. Каждый значок показывает, пройден или не пройден тест WCAG AA и AAA для обычного и крупного текста.
Кому пригодится
- Дизайнеры, которые тестируют фирменные цвета до передачи в разработку.
- Фронтенд-разработчики, проверяющие цвета кнопок, ссылок и подписей на соответствие WCAG AA.
- Аудиторы доступности, фиксирующие нарушения контрастности с точными коэффициентами.
- Команды контента и email-маркетинга, убеждающиеся, что текст остаётся читаемым на цветном фоне.
Вопросы и ответы
Инструмент бесплатный?
Да - полностью бесплатно, без регистрации и без ограничений. Всё работает прямо в браузере.
Какое соотношение контрастности нужно для WCAG AA?
WCAG 2.1 уровня AA требует не менее 4,5:1 для обычного текста и 3:1 для крупного. Уровень AAA повышает требования до 7:1 для обычного текста и 4,5:1 для крупного.
Что считается крупным текстом?
Крупный текст - это от 18 пт (около 24 пкс) при обычном начертании или от 14 пт (около 18,66 пкс) жирным. Для крупного текста допускается более низкая контрастность, потому что крупные символы легче читать.
Как рассчитывается соотношение контрастности?
По формуле (L1 + 0,05) / (L2 + 0,05), где L1 и L2 - относительная яркость более светлого и более тёмного цвета. Яркость вычисляется из каналов красного, зелёного и синего sRGB согласно определению WCAG 2.x.
Поддерживаются ли hex, RGB и названия цветов?
Да. Можно ввести 3-, 4-, 6- или 8-значный hex, значения rgb() и rgba() или любое CSS-название цвета, например «teal». Также доступен выбор через встроенную палитру.
Почему одно и то же соотношение иногда проходит тест, а иногда нет?
Требуемое соотношение зависит от размера текста и целевого уровня. Коэффициент 3,5:1 не пройдёт AA для обычного текста, но пройдёт AA для крупного - всегда проверяйте с учётом реального размера и уровня.