Порог контраста WCAG AA и AAA без мифов

AA и AAA относятся к требованиям, а не к цветам

WCAG 2.2 распределяет проверяемые критерии успеха по трём уровням: A, AA и AAA. «Контраст (минимальный)», критерий 1.4.3, относится к уровню AA. «Контраст (усиленный)», критерий 1.4.6, относится к уровню AAA. Поэтому у пары переднего плана и фона нет самостоятельной оценки «цвет AA» или «цвет AAA». У неё есть измеренный коэффициент, который проверяют по конкретному критерию для конкретного содержимого.

Контекст меняет результат. Коэффициент 4,6:1 проходит минимальный контраст уровня AA для обычного текста и усиленный контраст уровня AAA для крупного текста, но не достигает усиленного порога 7:1 для обычного. Фраза «это сочетание AAA» скрывает класс текста и критерий, на котором основано утверждение.

Четыре порога текста в одной таблице

У минимального и усиленного критериев одинаковые классы текста и перечисленные исключения, но разные обязательные коэффициенты. Сравнивайте с порогом неокруглённый результат. Отображаемой подписи 4,5:1 недостаточно, если полное число равно 4,48:1.

• При 3,2:1 крупный текст проходит минимум AA, обычный его не проходит, а усиленный контраст не проходит ни один класс.
• При 4,6:1 обычный текст проходит AA, а крупный проходит оба контрастных критерия — AA и AAA.
• При 6,5:1 обычный текст всё ещё ниже усиленного порога 7:1, хотя уверенно проходит AA.
• При 7,1:1 обычный и крупный текст проходят минимальный и усиленный критерии.
• Результат относится к проверенным переднему плану, фону, состоянию и классу текста, а не ко всем применениям того же токена.

У крупного текста есть определение, а не визуальное впечатление

WCAG определяет крупный текст как минимум 18 пунктов либо минимум 14 пунктов при жирном начертании; для шрифтов CJK учитывается эквивалентный размер. Документ Understanding объясняет соотношение CSS 1pt = 1,333px: это приблизительно 24px и 18,5px. Нормативное определение опирается на размер в пунктах и жирность, а не на тег заголовка, важность текста, прописные буквы или занимаемую ширину.

• Используйте размер, заданный автором до необязательного пользовательского масштабирования.
• Считайте 18pt или примерно 24 CSS px крупным текстом при любой насыщенности.
• Считайте 14pt или примерно 18,5 CSS px крупным только при жирном начертании.
• Проверяйте реальный шрифт и computed weight: необычно тонкие или непривычные формы букв остаются сложными для чтения даже у порога.
• Перепроверяйте адаптивную типографику, когда заголовок на мобильном экране уменьшается.
• Классифицируйте каждый стиль текста отдельно, а не весь компонент целиком.

Пройденный контраст AA не означает соответствие WCAG AA

Страница соответствует уровню AA только тогда, когда выполняет все применимые критерии уровней A и AA либо предоставляет соответствующую альтернативную версию. Прохождение критерия 1.4.3 даёт свидетельство по одному требованию из большого набора. Оно не проверяет клавиатуру, текстовые альтернативы, подписи, ошибки, reflow, видимость фокуса, размер целей, язык, семантику и остальные требования этих уровней.

• Соответствие накапливается: уровень AA включает все критерии A и все критерии AA.
• WCAG оценивает полные веб-страницы; прошедшая шапка или кнопка не делает соответствующей остальную страницу.
• Если страница входит в законченный процесс, заявленному уровню должны соответствовать все шаги этого процесса.
• Для соответствия можно опираться только на поддерживаемые с точки зрения доступности способы применения технологий.
• Формальное заявление о соответствии необязательно, но при публикации должно указывать версию, уровень, область и технологии согласно WCAG.

В отчёте пишите: «проверенная пара текста проходит критерий успеха WCAG 2.2 1.4.3 с коэффициентом 5,25:1», если доказано только это. Формулировку «страница соответствует WCAG 2.2 Level AA» оставляйте для оценки полной страницы по всем применимым критериям и требованиям соответствия.

Контраст AAA и соответствие всего сайта AAA — разные вещи

Коэффициент 7:1 для обычного текста подтверждает числовую часть усиленного контраста уровня AAA для этой отрисованной пары. Полное соответствие AAA намного шире: страница должна выполнить все критерии A, AA и AAA. W3C прямо не рекомендует требовать AAA как общую политику для целых сайтов, потому что для некоторого содержимого невозможно выполнить каждый критерий AAA.

• Используйте 7:1 для обычного и 4,5:1 для крупного текста как полезные усиленные цели там, где они подходят дизайну.
• Не ухудшайте сильную пару 8:1 только потому, что формальная цель проекта ограничена уровнем AA.
• Не называйте весь продукт AAA лишь потому, что токены дизайн-системы проходят усиленные числа контраста.
• Отдельно записывайте выполненные критерии AAA сверх заявленного уровня соответствия.
• Проверяйте, что усиленный контраст сохраняет понятную иерархию и восприятие в плотных интерфейсах, не опускаясь ниже нормативного минимума.

Исключения узкие, а соседние требования продолжают действовать

Критерии 1.4.3 и 1.4.6 исключают текст в неактивных компонентах интерфейса, чисто декоративный или невидимый текст, случайный текст внутри изображения с другим существенным визуальным содержимым, а также текст логотипа или названия бренда. Эти категории описывают роль содержимого, а не удобную стилистическую метку. Вторичный текст, placeholder активного поля, фирменный текст статьи, навигация и обычные подписи не получают исключение только потому, что они приглушены или связаны с брендом.

• Документируйте основание каждого применённого исключения.
• Убедитесь, что disabled-текст действительно относится к неактивному контролу, а не к активному состоянию с низким акцентом.
• Отличайте логотип от обычного текста, который просто использует фирменный шрифт или цвет.
• Проверяйте изображения текста по тем же критериям, если нет перечисленного исключения.
• Проверяйте границы активных контролов, индикаторы фокуса и смысловую графику по критерию нетекстового контраста там, где он применим.
• Не передавайте информацию только цветом.
• Продолжайте проверками масштабирования, reflow, изменения интервалов, семантики, клавиатуры и вспомогательных технологий.

Contrast checker не способен надёжно вывести все эти роли из двух полей цвета. Он рассчитывает коэффициент и сравнивает его с выбранными порогами. Специалист всё равно определяет тип содержимого, разрешает итоговые отрисованные цвета, выбирает критерий, проверяет состояния и помещает результат в полную оценку доступности.

Сохраняйте свидетельства, которые сможет повторить другой специалист

• Зафиксируйте URL, компонент, состояние, ширину экрана, тему, локаль и образец текста.
• Запишите вычисленные семейство, размер и насыщенность шрифта, а также признак крупного текста.
• Разрешите alpha, оверлеи, градиенты, изображения и наследование до эффективных переднего плана и фона.
• Храните коэффициент полной точности и использованный порог; округляйте только подпись для человека.
• Назовите точный критерий: минимальный 1.4.3 или усиленный 1.4.6.
• Запишите прохождение, провал или обоснованное исключение, не превращая результат в заявление о всей странице.
• Добавьте ссылку на первичный текст WCAG, дату и проверяющего.
• Ведите остальные критерии A, AA и необязательные AAA отдельно.

{
  "sample": "Текст основной кнопки",
  "state": "default",
  "foreground": "#FFFFFF",
  "background": "#4F46E5",
  "ratio": 6.2875,
  "text": { "sizePx": 16, "weight": 600, "largeScale": false },
  "criterion": "WCAG 2.2 1.4.3",
  "threshold": 4.5,
  "result": "pass"
}

Такая запись точно сообщает, что прошло проверку, и позволяет повторить её после изменения токена или типографики. Color Atlas придерживается той же границы: рассчитывает воспроизводимый коэффициент, подписывает четыре порога текста и связывает объяснение с материалами W3C. Одно число не превращается в сертификат. Используйте свидетельство внутри проверки полной страницы и законченного процесса.