Проверяйте коэффициенты контраста WCAG 2.1 между любыми цветами переднего плана и фона, предварительный просмотр образца текста и мгновенные результаты прохождения AA/AAA.
Возможности
- Выбор цвета в реальном времени: Настраивайте цвета переднего плана и фона с помощью палитры выбора цветов или вводите точные значения HEX.
- Матрица WCAG: Просматривайте требования AA/AAA для обычного текста, крупного текста и графики пользовательского интерфейса в одной таблице.
- Точная яркость: Коэффициенты контраста соответствуют WCAG 2.1, используя линеаризованные RGB-каналы и включают показания яркости для каждого цвета.
- Блок предварительного просмотра: Тестируйте заголовки и абзацы внутри живой примерной карточки с выбранной палитрой.
Руководство по использованию
- Выбрать цвета: Выберите или вставьте значения HEX для переднего плана и фона.
- Просмотреть коэффициент: Проверьте рассчитанный коэффициент контраста и таблицу AA/AAA для получения информации о прохождении/непрохождении.
- Настроить копию: Отредактируйте образец текста для предварительного просмотра реальных ярлыков, кнопок или маркетингового текста.
Технические детали
Относительная яркость
Каждый RGB-канал преобразуется в линейное значение с использованием гамма-кривой WCAG перед вычислением яркости с коэффициентами 0.2126, 0.7152 и 0.0722.
Коэффициент контраста
Формула коэффициента (L1 + 0.05) / (L2 + 0.05) сравнивает более светлые и более темные цвета для обеспечения постоянной читаемости на всех устройствах.
Пороги
AA обычный текст требует ≥ 4.5:1, крупный текст ≥ 3:1, AAA обычный нуждается в 7:1, AAA крупный 4.5:1, а графические объекты должны соответствовать 3:1.
Часто задаваемые вопросы
- Крупный текст использует другие пороги?
- Да. Текст ≥ 18px обычный или 14px жирный считается крупным и требует только 3:1 для AA или 4.5:1 для AAA.
- Как тестировать градиенты?
- Проверьте самые светлые и самые темные остановки в градиенте. Каждая пара остановок должна соответствовать желаемому коэффициенту.
- Значки считаются текстом?
- Сплошные значки и основная графика пользовательского интерфейса должны соответствовать как минимум 3:1 контраста относительно их фона.
Связанная документация
- WCAG 2.1 Контраст (Критерий успеха 1.4.3) - Официальное руководство по минимальным уровням контрастности для текста и изображений текста.
- WCAG 2.1 Контраст (1.4.6) - Расширенные требования к контрасту для соответствия AAA.
- MDN - Вычисление яркости - Справочная информация о линейной формуле RGB, используемой в инструментах доступности.
- W3C - Математика коэффициента контраста - Подробности о формуле коэффициента, округлении и обосновании.
- Карты инклюзивного дизайна - Советы по сочетанию цветов и типографики для разных аудиторий.