Обзор Контраст WCAG
Соотношение и уровень AA/AAA
Как использовать
Введите два цвета, чтобы увидеть их контраст по WCAG и мгновенный вердикт AA или AAA для текста и элементов интерфейса.
Ограничения
Сравниваются только два непрозрачных цвета. Прозрачность, градиенты и фотофон в расчёт не входят.
Контраст WCAG
Стандарты контраста WCAG
WCAG AA требует минимум 4,5:1 для обычного текста и 3:1 для крупного. AAA повышает пороги до 7:1 и 4,5:1.
Крупный текст — 18pt обычный или 14pt полужирный и больше. Иконки и индикаторы фокуса тоже должны достигать 3:1.
Проверка и исправление
Введите цвет текста и фона или двигайте светлоту ползунком, сохраняя тон и насыщенность.
Панель предложений показывает близкие цвета, достигающие AA. Выберите, скопируйте и проверьте на реальном фоне.
Частые вопросы
Чем AA отличается от AAA?
AA — базовый уровень, AAA — строже. AAA подходит для длинных текстов, AA — для продуктовых интерфейсов.
Что считается крупным текстом?
18pt (24px) или 14pt (18,66px) полужирный и больше. Для него допустим меньший контраст.
Почему в браузере коэффициент другой?
Браузер может применять прозрачность, наложения или фоновые изображения. Измеряйте итоговые цвета.
Можно использовать эти цвета в продакшене?
Да, это обычные HEX. Проверяйте их в контексте, включая hover и disabled.
Примеры: три реальных измерения
Три пары, посчитанные тем же алгоритмом — видно, где на самом деле находится 4,5:1.
Aa
Aa
Aa