Как пользоваться: Проверка контрастности
- 1
Введите два цвета
Укажите «Цвет текста» и «Цвет фона» в формате HEX, rgb(), hsl() или oklch() либо откройте круглый образец и выберите цвет.
- 2
Посмотрите вердикт
Коэффициент и пять строк «Пройдено» или «Не пройдено» показывают уровни AA и AAA для обычного и крупного текста, а также правило 3:1 для значков и границ.
- 3
Примените исправление
Если уровень не пройден, возьмите ближайший более тёмный или светлый цвет текста или фона, который проходит проверку, и скопируйте новое значение.
Лимиты и Pro
Бесплатно и без ограничений: любое число проверок, 5 критериев WCAG 2.2 для пары, 2 рекомендуемых исправления на каждый непройденный уровень и сетка до 7 цветов.
О инструменте «Проверка контрастности»
Этот инструмент проверяет контраст и измеряет, насколько два цвета различаются по яркости, по формуле относительной яркости из WCAG 2.2. По ней работают аудиты доступности в браузерах и плагины для дизайна. Результат — коэффициент от 1:1 (цвета одинаковы) до 21:1 (чёрный на белом). Критерий успеха 1.4.3 требует на уровне AA 4,5:1 для основного текста и 3:1 для крупного; критерий 1.4.6 повышает планку для AAA до 7:1 и 4,5:1; критерий 1.4.11 требует 3:1 для значимых нетекстовых элементов: рамок фокуса, контуров полей ввода и линий на графиках.
Живой пример показывает в ваших цветах текст обоих размеров, кнопку с контуром и значок, так что можно оценить не только число, но и читаемость. Коэффициенты обрезаются до двух знаков, а не округляются: пара с 4,496:1 не удовлетворяет требованию 4,5:1. Если уровень не пройден, инструмент меняет светлоту одного из цветов в OKLCH, сохраняя оттенок и насыщенность, и предлагает ближайшее значение, которое проходит проверку, отдельно для текста и для фона.
Проверка рассчитана на сплошные цвета. Она не оценивает текст поверх фото или градиентов, прозрачность, отображение начертания шрифта на конкретном экране и новый метод APCA, предложенный для WCAG 3. Считайте успешный результат минимумом и проверяйте также на реальных экранах.
Конфиденциальность
Оба цвета остаются в этой вкладке: коэффициент, проверки «Пройдено» и «Не пройдено» и рекомендуемые исправления рассчитывает ваш браузер. Значения цветов не отправляются на сервер и нигде не сохраняются.