Контраст текста и фона: пороги WCAG и что придёт им на смену

Контраст текста и фона — не про «выглядит достаточно ярко». Это конкретный коэффициент, который считается по формуле из яркости двух цветов, и пройти или не пройти его можно только цифрой, а не взглядом.

Пороги WCAG

Действующий стандарт — WCAG 2.2, он же основа большинства чек-листов по доступности:

Крупным считается текст от 24px обычного начертания или от 18.66px жирного — буквы толще, глазу проще, поэтому порог ниже. Всё остальное — включая плейсхолдеры в полях и подписи под иконками — обязано укладываться в 4.5:1, если это не декоративный элемент.

Проверить свою пару цветов, не считая формулу в уме, можно в чекере контраста — а прямо здесь можно прикинуть на глаз:

Живой чекер контраста

Синий на белом по умолчанию проходит AA, но не дотягивает до AAA — попробуйте затемнить синий (сдвиньте цвет ближе к чёрному) и посмотрите, с какого момента загорится AAA.

Почему формула иногда расходится с ощущением

Контраст — это отношение яркости, а не «разница цветов на глаз». Классическая ловушка: жёлтый кажется ярким и заметным сам по себе, но белый текст на жёлтом фоне почти нечитаем — их яркости слишком близки, и коэффициент проваливается до 1.5:1, хотя визуально жёлтый выглядит «контрастным» цветом. Формула WCAG 2.x также известна тем, что недооценивает контраст на некоторых парах тёмных цветов и переоценивает на некоторых светлых — отсюда родилась APCA.

APCA и WCAG 3: что придёт на смену

APCA (Accessible Perceptual Contrast Algorithm) — альтернативная формула, которая учитывает не только яркость, но и то, как человеческий глаз воспринимает контраст в зависимости от размера и насыщенности шрифта. Её разрабатывали именно как замену действующей формуле для готовящегося стандарта WCAG 3.

Разработчикам стоит знать: APCA исключили из рабочего черновика WCAG 3 в 2023 году — рабочая группа W3C не набрала достаточной поддержки для его принятия, и алгоритм для WCAG 3 пока не определён. Сам WCAG 3 остаётся черновиком и вряд ли станет финальным стандартом раньше 2030 года.

Практический вывод на сегодня: ориентироваться нужно на WCAG 2.2 — это единственный официально действующий стандарт, и именно его коэффициенты (4.5:1 / 3:1 / 7:1) проверяют Lighthouse, axe и другие аудиторы доступности. APCA можно тестировать добровольно при обновлении дизайн-системы, но требованием он пока не является нигде.

При чём здесь SEO и Lighthouse

Контраст — один из аудитов категории Accessibility в Lighthouse, и здесь он не «мягкая рекомендация»: проваленный контраст гарантированно снижает итоговый балл категории, в отличие от многих других аудитов, которые засчитываются частично. Полноценный балл 100 в Accessibility без прохождения контраста недостижим физически — это один из немногих аудитов Lighthouse, которые нельзя обойти компромиссом.

Коротко

• WCAG 2.2 (действующий стандарт): обычный текст — 4.5:1 (AA) / 7:1 (AAA), крупный — 3:1 / 4.5:1.
• Крупный текст — от 24px обычного начертания или 18.66px жирного.
• Контраст считают по формуле, а не на глаз: жёлтый на белом кажется ярким, но проваливает коэффициент.
• APCA — более точный алгоритм, готовился на замену для WCAG 3, но его исключили из черновика в 2023 году. Ориентир на сегодня — только WCAG 2.2.
• Lighthouse проверяет именно WCAG 2.2 и не даёт скидок на проваленный контраст.