Что такое Проверка контраста WCAG?

Инструмент проверки цветового контраста по WCAG вычисляет соотношение контрастности между цветом текста и фона и сообщает, соответствует ли комбинация стандартам доступности WCAG 2.1 уровня AA и AAA для обычного и крупного текста.

Проверка считает относительную яркость по WCAG 2.1 для пары цветов — заданных как hex, rgb(), hsl() или имя CSS — и сверяет с уровнем AA (4,5:1 для основного текста, 3:1 для крупного) и AAA (7:1 и 4,5:1). Заодно проверяется минимум 3:1 для элементов интерфейса — рамок полей, иконок. Если сочетание не проходит, панель предложений плавно сдвигает передний план к подходящему цвету, предлагая цели уровня AA и AAA.

Как использовать

1. Введите или выберите цвет переднего плана (текста) и цвет фона — вставьте hex, rgb(), hsl() или имя цвета CSS либо используйте палитру.
2. Просмотрите соотношение контрастности и результаты проверки соответствия WCAG AA и AAA для обычного текста, крупного текста и элементов интерфейса.
3. Если контраст недостаточен, воспользуйтесь предложенными корректировками для поиска ближайшей доступной комбинации цветов.

Когда использовать

• Проверить фирменные цвета на белом и тёмном фоне перед публикацией лендинга.
• Подобрать доступные состояния кнопки: обычное, при наведении и отключённое.
• Проверить плейсхолдеры и отключённые поля — они часто падают ниже 4,5:1.

Результат

UI-дизайнер проверяет фирменный синий #3B82F6 на белом #FFFFFF — соотношение 4,5:1 проходит AA для крупного текста, но не достигает AAA для обычного. Цвет затемняется до #2563EB (5,3:1) и проходит оба уровня.

Частые вопросы

Какое соотношение нужно для основного текста по WCAG AA?

4,5:1 к фону. Крупный текст (от 18pt обычного или 14pt жирного) спускается до 3:1. AAA повышает их до 7:1 и 4,5:1. Элементы интерфейса вроде рамок полей обходятся 3:1.

Почему мой тёмно-серый на белом не проходит, хотя мне всё видно?

Личное восприятие и измерения быстро расходятся. 4:1 выглядит чётко на калиброванном экране при хорошем свете, но рассыпается у людей со сниженным зрением, при бликах и на старых мониторах. WCAG задаёт планку по худшему случаю, не по лучшему.

Иконкам и рамкам нужен тот же контраст, что и тексту?

Нет. В WCAG 2.1 появилось правило 3:1 для нетекстовых элементов: рамок, иконок, индикаторов фокуса, элементов диаграмм. Декоративная графика исключение, но всё, что несёт информацию, должно держать 3:1 относительно соседних цветов.

Как починить пару, не меняя фирменный цвет?

Если фирменный цвет трогать нельзя, двигайте фон. Темните или светлите его, пока соотношение не пройдёт. Панель предложений здесь крошечными шагами двигает передний план; ту же логику можно применить к фону.

Есть ли в WCAG правила для полупрозрачного текста или текста на фото?

WCAG требует оценивать худший пиксель под текстом. Для текста поверх фото обычно ставят полупрозрачную подложку или сплошную плашку. Измеряйте уже отрендеренный цвет, а не исходный hex.

Похожие инструменты