Обновлено: .
WCAG — набор требований доступности. APCA — модель оценки контраста. Корректно сравнивать APCA с методом контраста WCAG 2, а не противопоставлять его всему стандарту. Сейчас APCA можно использовать как дополнительный инструмент проектирования; он не заменяет проверку соответствия WCAG 2.2.
Что измеряет WCAG 2
Контрастное отношение вычисляют по относительной яркости более светлого и более тёмного цвета: (Lсветлый + 0,05) / (Lтёмный + 0,05). Диапазон — от 1:1 до 21:1. Если поменять текст и фон местами, число останется тем же.
Для критерия 1.4.3 уровня AA обычному тексту нужно не менее 4,5:1, крупному — 3:1. Крупным считается текст от 18 pt, либо от 14 pt при жирном начертании: примерно 24 и 18,67 CSS px соответственно. Не округляйте результат до проходного: 4,499:1 не становится 4,5:1. Для AAA критерий 1.4.6 задаёт 7:1 и 4,5:1 соответственно. Логотипы, декоративный и некоторые другие виды текста имеют исключения.
Граница элемента и его подпись — разные проверки. Для визуальной информации, необходимой для распознавания компонента, его состояния и значимой графики, действует 1.4.11 с порогом 3:1 относительно соседних цветов и своими исключениями. Это не требование обвести каждую кнопку контрастной рамкой.
Что меняет APCA
APCA — Accessible Perceptual Contrast Algorithm — рассчитывает lightness contrast, обозначаемый Lc. Он учитывает полярность: тёмный текст на светлом фоне обычно даёт положительный результат, светлый на тёмном — отрицательный. Отрицательное число не означает плохой контраст. Для интерпретации важны модуль значения и условия применения.
Разделяйте сам расчёт и рекомендации по типографике. Основная функция APCA получает яркости текста и фона. Размер и насыщенность шрифта используются при интерпретации через рекомендации и таблицы; они не являются аргументами этого базового расчёта.
В рекомендациях автора APCA, например, Lc 75 связан с основным текстом при определённых размерах и начертаниях, а Lc 60 — с другими условиями чтения. Из этого не следует универсальное правило «любое значение выше 60 проходит». Нельзя и превращать Lc в проценты или точно переводить его в 4,5:1.
APCA станет WCAG 3?
По состоянию на 5 ноября 2026 года опубликованный Working Draft WCAG 3 от 10 сентября 2026 года оставляет алгоритм контраста неопределённым. В разделе Text contrast sufficient есть явная пометка, что алгоритм ещё предстоит выбрать. Сам документ — рабочий черновик, а не действующая W3C Recommendation.
Поэтому формулировка «APCA — будущее, на которое обязательно перейдёт WCAG» выдаёт ожидание за принятое решение. Более точная: APCA развивался как кандидат для нового подхода к контрасту; он полезен для дополнительной оценки, но окончательное решение W3C не принято. Название npm-пакета apca-w3 само по себе не устанавливает нормативный статус.
Собственные примеры вместо галочки «реальное восприятие»
Ниже — наши пары цветов, а не извлечённые из чужого скриншота значения. Все цвета непрозрачные sRGB, без градиентов и смешивания. Расчёт APCA выполнен реализацией apca-w3 0.1.9, алгоритм 0.0.98G-4g. Образцы на иллюстрации используют Arial, 24 px, 700; колонка в таблице отдельно оценивает порог 4,5:1 для обычного текста.
| Текст / фон, sRGB | WCAG 2 | APCA | Обычный текст AA, 4,5:1 |
|---|---|---|---|
| #FFFFFF / #F26722 | 3,12:1 | -62,70 Lc | Нет |
| #000000 / #F26722 | 6,74:1 | +46,73 Lc | Да |
| #428FCC / #FFFFFF | 3,48:1 | +62,10 Lc | Нет |
| #428FCC / #000000 | 6,03:1 | -39,59 Lc | Да |
| #FFFFFF / #B54500 | 5,50:1 | -81,88 Lc | Да |
| #767676 / #FFFFFF | 4,54:1 | +71,57 Lc | Да |
| #FFFFFF / #767676 | 4,54:1 | -77,04 Lc | Да |
У белого на #F26722 контраст WCAG 3,12:1: для обычного текста этого недостаточно, для крупного порог 3:1 выполнен. У чёрного на том же фоне отношение 6,74:1, но модуль Lc ниже. Модели по-разному оценивают эти пары. Это не доказательство, что чёрная подпись не читается ни одним человеком или что белая подходит каждому.
Обратите внимание и на #767676 с белым: при перестановке цветов WCAG остаётся 4,54:1, а APCA меняется с +71,57 на −77,04 Lc. Это наглядная демонстрация различия математических моделей без спора о личном вкусе.
Строка «Real perception: ✓» в популярных сравнительных картинках создаёт ложную определённость. Для такого вывода нужны участники, описанные зрительные особенности, устройства, освещение, размер и гарнитура, задача чтения и измеряемый результат. Наши примеры показывают расхождение оценок; они не являются таким исследованием.
Данные расчёта в JSON: исходные цвета, значения до округления, версия реализации и SHA-256 исходного файла. Для повторения используйте APCAcontrast(sRGBtoY(textRGB), sRGBtoY(backgroundRGB)) из указанной реализации; WCAG рассчитывается по формуле выше с преобразованием sRGB в линейную яркость.
Как принять решение в реальном интерфейсе
- Зафиксируйте нормативную цель и проверьте её методом соответствующей версии WCAG.
- Измерьте фактический фон: состояния hover, focus, disabled, ошибки, выбранные элементы, светлую и тёмную темы. Для прозрачного текста учитывайте итоговое смешивание.
- Дополнительно оцените APCA вместе с гарнитурой, размером, насыщенностью и назначением текста. Запишите версию инструмента.
- Если результат спорный, измените пару цветов или типографику. Не подменяйте неудачную проверку более удобной метрикой.
- Проверьте читаемость в задачах с представителями аудитории.
Например, белый текст на более тёмном оранжевом #B54500 получает 5,50:1 и −81,88 Lc. Это кандидат для дальнейшей проверки, удовлетворяющий порогу WCAG AA для обычного текста. Такая правка продуктивнее, чем доказывать, что один из двух предыдущих образцов «объективно правильный».
Контраст не должен нести весь смысл
Даже отличный контраст не решает задачу, если ошибка обозначена только цветом, а серии графика различаются только оттенками. Добавляйте текст причины ошибки, подписи, маркеры и типы линий. Эмуляция нарушений цветового зрения помогает находить некоторые проблемы, но не воспроизводит опыт всех людей.
Источники и статус стандартов проверены 5 ноября 2026 года.
Применить правила с ИИ-агентом
По результатам исследования мы создали открытые скиллы для Codex и Claude Code, которые помогают анализировать и улучшать сайты и приложения. Accessible UI направляет агента при проверке семантики, клавиатурного управления, фокуса, форм и контраста; Adaptive Interfaces помогает адаптировать интерфейс к размерам окна, масштабу текста, клавиатуре и складным устройствам. Агент изучает текущий проект, предлагает обоснованные улучшения и проверяет согласованные изменения. Скиллы не заменяют проверку с пользователями и вспомогательными технологиями.
Практические правила этой серии собраны в скилле Accessible UI на GitHub: семантика, клавиатура, фокус, формы, контраст и проверка результата. Инструкции написаны на английском. Порядок установки и примеры вызова приведены в начале серии.