Контраст текста и фона: пороги WCAG и что придёт им на смену
Контраст текста и фона — конкретный коэффициент, который считается по формуле из яркости двух цветов. Пройти или не пройти его можно только цифрой, а «выглядит достаточно ярко» тут ничего не решает.
Пороги WCAG
Действующий стандарт — WCAG 2.2, он же основа большинства чек-листов по доступности:
| Уровень | Обычный текст | Крупный текст |
|---|---|---|
| AA (минимум) | 4.5:1 | 3:1 |
| AAA (строгий) | 7:1 | 4.5:1 |
Крупным считается текст от 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 без прохождения контраста недостижим физически, обойти этот аудит компромиссом не выйдет.
Коротко
- 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 и не даёт скидок на проваленный контраст.
Контраст текста и фона: проверка по WCAG
Подберите цвет текста и фона так, чтобы надпись читалась: коэффициент контрастности и вердикт по WCAG считаются сразу.
Попробовать
