APCA и контраст WCAG 2: формула, статус и режим высокой контрастности

Дизайнер, проверяющий цвета, рано или поздно сталкивается с двумя числами: коэффициентом контраста WCAG (4,5:1, 3:1) и значением APCA, например Lc 75. Они не всегда совпадают. На этой странице объясняется, как работает формула WCAG 2, что такое APCA и каков его реальный статус и как режим высокой контрастности Windows связан с обоими.

Краткий ответ для тех, кому нужно выполнить требование: законы и стандарты используют коэффициент контраста WCAG 2. Это общая информация, а не юридическая консультация.

Формула WCAG 2 по шагам

WCAG 2.2 определяет контраст в два шага, оба — в своём глоссарии.

1. Относительная яркость — насколько ярок цвет: от 0 для самого тёмного чёрного до 1 для самого светлого белого. Для каждого канала sRGB:

C_srgb = C_8bit / 255
C = C_srgb / 12.92                         if C_srgb <= 0.04045
C = ((C_srgb + 0.055) / 1.055) ^ 2.4       otherwise

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

Весовые коэффициенты показывают, что глаз гораздо чувствительнее к зелёному, чем к синему. (До мая 2021 года в тексте WCAG использовался порог 0,03928; W3C отмечает, что практического значения это не имеет.)

2. Коэффициент контраста — где L1 — яркость более светлого цвета, а L2 — более тёмного:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Результат лежит в диапазоне от 1:1 (один и тот же цвет) до 21:1 (чёрное на белом). Пример: серый #767676 имеет яркость около 0,181, поэтому на белом он даёт (1 + 0,05) / (0,181 + 0,05) ≈ 4,54:1 и проходит минимум 4,5:1. На шаг светлее, #777777, даёт около 4,48:1 и не проходит — W3C указывает, что значения нельзя округлять, поэтому 4,499:1 не удовлетворяет 4,5:1.

Пороговые значения

Крупный текст — это не менее 18 пунктов (24 CSS-пикселя) или 14 пунктов полужирным (около 18,66 CSS-пикселя). W3C объясняет значение 4,5:1 как компенсацию потери контрастной чувствительности, которая сопровождает зрение около 20/40. Проверьте любую пару нашим инструментом проверки контраста.

Известные ограничения формулы WCAG 2

Формула проста и проверяема, поэтому она подходит для регулирования. У неё есть и ограничения, которые упоминает документ Understanding от W3C: она не учитывает начертание шрифта, а тонкие или необычные шрифты из-за сглаживания могут выглядеть намного бледнее, чем следует из их номинального цвета — «коэффициент контраста, который номинально проходит… но на практике имеет гораздо более низкий контраст». Там рекомендуют использовать более плотные шрифты или пару цветов, превышающую минимум. Формула также исходит из цветов sRGB.

Кроме того, формула симметрична: если поменять местами цвет текста и фона, коэффициент не изменится. Проект APCA идёт дальше и утверждает, что математика контраста WCAG 2 «не точно моделирует ни зрительное восприятие человека, ни нарушения зрения» — это отправная точка APCA.

Что такое APCA

Accessible Perceptual Contrast Algorithm описан в своём официальном репозитории как метод оценки для прогнозирования воспринимаемого контраста между цветами sRGB на мониторе, разработанный в рамках работы над W3 «Silver» / WCAG 3. Отличия от WCAG 2 на практике:

• Порядок имеет значение. Первый цвет — текст, второй — фон; результат со знаком, и знак показывает полярность (тёмное на светлом или светлое на тёмном).
• Другая шкала. На выходе — значение Lc примерно от −108 до 106, а не коэффициент.
• Размер и начертание входят в ответ. Функция поиска возвращает для значения Lc нужные размеры шрифта для начертаний от 100 до 900. В README приведены правила вроде максимума Lc 90 для шрифтов крупнее 24 px с насыщенностью от 300 и выше.
• Бета. Библиотека (apca-w3 в npm) находится в публичной бета-проверке, а связанный с ней черновой критерий в README назван работой в процессе.

Входит ли APCA в WCAG 3?

Окончательного решения нет. Два факта, оба проверены по официальным источникам:

1. В репозитории APCA сказано, что APCA оценивается как замена математики контраста WCAG 2 для будущих стандартов.
2. В действующем рабочем черновике WCAG 3 от 10 сентября 2026 года сказано: «Алгоритм контраста, используемый в WCAG 3, ещё предстоит определить». Его требования к контрасту текста имеют статус developing, а способ измерения остаётся открытым. В черновике также говорится, что ссылаться на него иначе чем на работу в процессе неуместно.

Так что APCA — кандидат, WCAG 3 — черновик, и ни то ни другое не нормативно. WCAG 2.2 — действующая Рекомендация W3C, а EN 301 549, европейский стандарт, на котором основан European Accessibility Act, ссылается на критерии успеха WCAG 2. Пара цветов, которая проходит по APCA, но не проходит 4,5:1, всё равно не удовлетворяет требованию.

WCAG или APCA: практическое правило

1. Выполните коэффициент WCAG 2 для всего текста и всех компонентов интерфейса. Это и есть требование.
2. Используйте APCA, если хотите, как подспорье в дизайне сверх этого: например, чтобы выбрать более плотное начертание для тонкого текста или заметить, что пара, едва проходящая 4,5:1, всё равно плохо читается светлым текстом на тёмном фоне.
3. Не выдавайте результаты APCA за соответствие. Отчёты, заявления и закупки ссылаются на WCAG 2.

Режим высокой контрастности Windows и принудительные цвета

«WCAG high contrast mode» — частый запрос, но он смешивает две вещи.

Что это такое. Windows предлагает темы с повышенной контрастностью (Windows 11; в Windows 10 это называется режимом высокой контрастности). Microsoft описывает их в разделе «Параметры → Специальные возможности → Контрастные темы» с сочетанием клавиш Левый Alt + Левый Shift + Print Screen. Браузеры затем применяют ограниченную палитру пользователя к веб-страницам. В CSS это определяется с помощью медиа-функции forced-colors: значение active означает, что пользовательский агент принудительно применяет выбранную пользователем ограниченную цветовую палитру, а автору доступны только системные цвета.

Что говорит WCAG. Ни один критерий успеха WCAG 2.2 не требует режима высокой контрастности или поддержки принудительных цветов по названию, и сайту не нужно предлагать собственный переключатель высокой контрастности, чтобы соответствовать AA. Но ваш код может сломать страницу для людей, которые пользуются таким режимом, и тогда нарушаются другие критерии:

• Фокус. Техника W3C C40 предупреждает, что пользовательские агенты обычно подавляют box-shadow в режимах принудительных цветов, поэтому индикатор фокуса, созданный только тенью, исчезает. C40 предлагает сочетать его с outline: 2px transparent solid для совместимости с режимами принудительных цветов — это касается критерия 2.4.7 Видимый фокус.
• Иконки и границы. Иконки, нарисованные фоновыми изображениями, и элементы управления, отличающиеся только цветом фона, могут пропасть. Это затрагивает 1.4.11 Контраст нетекстового контента и 1.4.1 Использование цвета.
• Не считайте это запросом на больший контраст. В спецификации Media Queries отмечено, что принудительные цвета не обязательно означают предпочтение более высокого контраста; для этого существует prefers-contrast.

Проверка нескольких ключевых страниц с включённой контрастной темой — хорошая практика, хотя ни один критерий её не называет.

Что делают наши проверки

Наши проверки используют коэффициент контраста WCAG 2, как и требования: низкий контраст текста на уровне AA (1.4.3) и повышенный контраст на уровне AAA (1.4.6), который в наших отчётах показан отдельно от результатов AA. Значения APCA мы не сообщаем. Запустите бесплатный WCAG тестер на странице или проверьте одну пару инструментом проверки контраста. Наши проверки — это автоматическая проверка, а не полный аудит и не юридическая консультация.

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

Что использовать для контраста: WCAG или APCA?

Чтобы выполнить требования, используйте коэффициент контраста WCAG 2: именно на него ссылаются WCAG 2.2, EN 301 549 и основанные на них законы. APCA может стать полезным вторым мнением в дизайне, но сегодня не входит ни в один нормативный стандарт.

Входит ли APCA в WCAG 3?

Нет, решения об этом нет. APCA разрабатывался как кандидат на метод для WCAG 3 и находится в публичной бета-версии. В действующем рабочем черновике WCAG 3 от сентября 2026 года сказано, что алгоритм контраста ещё предстоит определить, а сам WCAG 3 — это черновик, а не стандарт.

Как рассчитывается коэффициент контраста WCAG?

Оба цвета переводятся в относительную яркость: каждый канал sRGB линеаризуется, затем L = 0,2126 R + 0,7152 G + 0,0722 B. Коэффициент равен (L1 + 0,05) / (L2 + 0,05), где L1 — более светлый цвет. Он находится в диапазоне от 1:1 до 21:1 и не округляется.

Требует ли WCAG поддержки режима высокой контрастности Windows?

Ни один критерий WCAG не называет режим высокой контрастности или принудительных цветов. Но ваш CSS может сломать страницу в этом режиме, например рамка фокуса, созданная только через box-shadow, которую браузеры там обычно убирают. Проверка в режиме принудительных цветов — хорошая практика.

Может ли пара цветов пройти WCAG и всё равно плохо читаться?

Да. Формула WCAG не учитывает начертание, а тонкие шрифты со сглаживанием могут выглядеть бледнее, чем предполагает их цвет. В таком случае W3C рекомендует более плотные шрифты или контраст выше минимального.

Источники

• W3C, WCAG 2.2 (definitions of relative luminance and contrast ratio): https://www.w3.org/TR/WCAG22/
• W3C, Understanding 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• W3C, WCAG 3.0 Working Draft: https://www.w3.org/TR/wcag-3.0/
• APCA, apca-w3 repository: https://github.com/Myndex/apca-w3
• W3C, Technique C40, two-colour focus indicator: https://www.w3.org/WAI/WCAG22/Techniques/css/C40
• W3C, Media Queries Level 5 (forced-colors): https://www.w3.org/TR/mediaqueries-5/
• Microsoft, Change color contrast in Windows: https://support.microsoft.com/en-us/windows/change-color-contrast-in-windows-fedc744c-90ac-69df-aed5-c8a90125e696