Цвет · доступностьПроверка контрастности WCAG
Проверьте контраст текста и фона по WCAG. Введите два цвета — увидите коэффициент, уровни AA и AAA и как поправить цвет, чтобы пройти.
Всё считается в браузере — цвета не уходят на сервер
01
Цвета
коэффициент пересчитывается на каждый ввод02
Проверка по уровням
пять критериев WCAG 2.1AA
Обычный текст
4,54 ≥ 4,5
порог 4,5 : 1
AA
Крупный текст
4,54 ≥ 3
порог 3 : 1
AAA
Обычный текст
4,54 < 7
порог 7 : 1
AAA
Крупный текст
4,54 ≥ 4,5
порог 4,5 : 1
UI · 1.4.11
Иконки, границы, элементы
4,54 ≥ 3
порог 3 : 1
03
Живой предпросмотр
пример текста на фоне с проверкой контраста WCAGЧто под какой порог✓ проходит✓ проходит✓ проходит✕ не проходит
Обычный текст 16px
нужно 4,5:1 для AA
Крупный 24px / 18,66px bold
нужно 3:1 для AA
Граница поля и кнопка
критерий 1.4.11 — 3:1
Обычный текст по AAA
нужно 7:1
04
Как исправить
ближайший проходящий цвет по светлотеAA · обычный текст
4,5 : 1Уровень уже пройден — менять цвет не нужно.
AAA · обычный текст
7 : 1#595959
7,00 : 1
Контраст — про яркость. Часто достаточно сделать текст чуть темнее или фон чуть светлее, не меняя оттенок.
05
О контрасте WCAG
Контраст — это насколько текст читается на фоне. WCAG задаёт минимальные пороги: чем мельче текст, тем выше должен быть контраст. Считается не различие оттенков, а отношение яркостей — от 1:1 у одинаковых цветов до 21:1 у чёрного на белом.
Коэффициент контраста
Основа1:1 … 21:1
Отношение яркости двух цветов. 1:1 — цвета совпадают, 21:1 — максимум (чёрное на белом). Оттенок сам по себе роли не играет — важна яркость.
Уровни AA и AAA
Уровни4,5:1 · 7:1
AA — базовый уровень доступности, его требуют большинство гайдлайнов и законов. AAA — усиленный; выполнить его для всего текста удаётся не всегда.
Крупный текст
Порог≥ 3:1
Для крупного текста порог мягче — 3:1 вместо 4,5:1. Крупный — это от 18pt (≈ 24px) обычного или от 14pt (≈ 18,66px) жирного.
Интерфейс и графика
UI · 1.4.113:1
Иконки, границы полей, состояния фокуса и значимые части графики тоже должны контрастировать — минимум 3:1 по критерию 1.4.11.
Как считается
Формула(L1 + 0,05) / (L2 + 0,05)
Каналы sRGB линеаризуются, из них считается относительная яркость, затем берётся отношение. Поэтому яркий жёлтый на белом не проходит: оба слишком светлые.
WCAG 3 и APCA
БудущееLc
APCA — новый перцептивный алгоритм для будущего стандарта WCAG 3: точнее учитывает восприятие светлого и тёмного. Пока черновик, официальный критерий — WCAG 2.
06