APCA и WCAG 2: какой проверке контраста верить
Коэффициент контраста WCAG 2 требует закон. APCA это более новая модель, которая намного точнее предсказывает читаемость, особенно в тёмных темах и на насыщенных цветах. Если проверять оба, текст получится и соответствующим требованиям, и действительно удобным для чтения.
Как устроен контраст WCAG 2
WCAG 2 сравнивает относительную яркость текста и фона: (L1 + 0.05) / (L2 + 0.05). Результат лежит от 1:1 до 21:1. Уровень AA требует 4.5:1 для обычного текста и 3:1 для крупного, то есть от 24 px обычного начертания или от 18.66 px жирного. Уровень AAA требует 7:1 и 4.5:1.
Формула симметрична: если поменять текст и фон местами, число не изменится. И она считает все разницы яркости равноценными, а глаз видит иначе.
Как устроен APCA
APCA (Accessible Perceptual Contrast Algorithm) Эндрю Сомерса возвращает значение контраста светлоты Lc примерно от -108 до 106. Знак показывает полярность: плюс для тёмного текста на светлом фоне, минус для светлого текста на тёмном. Модель учитывает, как глаз подстраивается под более яркий цвет и как размер и жирность шрифта меняют читаемость.
Типичные ориентиры APCA: Lc 90 желательно для основного текста, Lc 75 минимум для основного текста, Lc 60 для остального читаемого текста, Lc 45 для крупных или жирных заголовков, Lc 30 для любого текста вообще и Lc 15 для нетекстовых элементов вроде разделителей.
Где они расходятся
Возьмём яркий оранжевый #ff5733. WCAG 2 уверенно выбирает чёрный текст: около 6.7:1 против 3.2:1 у белого, и белый не проходит AA. APCA говорит обратное: белый текст даёт около Lc 63, а чёрный только около Lc 47. Большинству людей белый на таком оранжевом читать легче, и именно для таких случаев APCA и создавали.
С тёмными темами то же самое. WCAG 2 переоценивает контраст между тёмными цветами, поэтому средне-серый текст на почти чёрном фоне может пройти AA и всё равно утомлять глаза.
Что использовать
Законы и требования к закупкам, включая ADA в США, Section 508 и EN 301 549 в ЕС, ссылаются на WCAG 2.1 или 2.2. APCA входит в черновик WCAG 3, который ещё не утверждён. Поэтому для соответствия проходите WCAG 2 AA, а APCA используйте, чтобы выбрать лучший из подходящих вариантов и настроить тёмную тему.
PickShade показывает оба числа рядом и может подобрать ближайший цвет, который проходит выбранный порог.
Вопросы и ответы
Какой контраст нужен для WCAG AA?
4.5:1 для обычного текста и 3:1 для крупного текста от 24 px или от 18.66 px жирным. Элементы интерфейса и значимая графика требуют 3:1 относительно соседних цветов.
APCA уже входит в WCAG 3?
APCA это метод контраста в рабочем черновике WCAG 3. Черновик ещё не стандарт и может измениться, поэтому юридической опорой остаётся WCAG 2.
Что значит отрицательное значение APCA?
Это светлый текст на тёмном фоне. Сравнивайте с порогами модуль числа: Lc -75 читается так же, как Lc 75.
Почему WCAG и APCA советуют разный цвет текста?
WCAG 2 использует простое отношение яркостей, которое переоценивает тёмные цвета, а APCA моделирует восприятие, полярность и размер шрифта. Сильнее всего они расходятся на насыщенных средних тонах: оранжевом, красном, синем.