Проверка контраста цветов WCAG 2.2 для уровней AA и AAA

Как пользоваться

Введите цвет текста в поле Цвет текста, а цвет под ним — в поле Цвет фона.
Прочитайте Коэффициент контраста. Четыре проверки текста и проверка элементов покажут, каких уровней достигает пара.
Для основного текста стремитесь к AA, обычный текст. Крупный текст требует меньшего контраста; размеры указаны в разделах ниже.
Если проверка не пройдена, начните с Предлагаемый цвет текста и проверьте результат в своём дизайне.

Как считается коэффициент

WCAG 2.2 присваивает каждому цвету относительную яркость. Каждое значение красного, зелёного и синего сначала линеаризуется: значение не больше 0,04045 (по шкале от 0 до 1) делится на 12,92, а большее возводится в степень 2,4 после прибавления 0,055 и деления на 1,055. Три результата затем взвешиваются: 0,2126 для красного, 0,7152 для зелёного и 0,0722 для синего. Коэффициент контраста — это яркость более светлого цвета плюс 0,05, делённая на яркость более тёмного плюс 0,05.

Результат лежит от 1, для двух одинаковых цветов, до 21, для чёрного на белом.

L = 0,2126 × R + 0,7152 × G + 0,0722 × B
коэффициент = (L1 + 0,05) ÷ (L2 + 0,05)

L1  яркость более светлого цвета
L2  яркость более тёмного цвета

Уровни

WCAG 2.2 задаёт такие минимальные коэффициенты. Уровень и критерий успеха указаны, чтобы можно было найти точную формулировку.

AA, обычный текст: 4,5:1 (критерий успеха 1.4.3).
AA, крупный текст: 3:1 для текста в 18 пунктов или в 14 пунктов полужирным (1.4.3).
AAA, обычный текст: 7:1 (критерий успеха 1.4.6).
AAA, крупный текст: 4,5:1 (1.4.6).
Кнопки, границы и значки, которые нужны читателю для работы со страницей: 3:1 (1.4.11).

Что проверка не охватывает

Текст на фотографиях, изображениях и градиентах: фон меняется под текстом, поэтому проверяйте реальные пиксели.
Полупрозрачные цвета: введите цвет, который читатель видит на странице.
Наведение, фокус и другие состояния: проверяйте цвета каждого состояния.
Крупность текста для читателя: её определяют размер и толщина шрифта, а страница их не знает.

Пример: серый #777 на белом

У серого #777 каждый канал равен 119 из 255, что даёт относительную яркость около 0,184. У белого яркость 1, поэтому коэффициент равен (1 + 0,05) ÷ (0,184 + 0,05) = 4,48.

Поэтому #777 на белом не проходит AA для обычного текста с небольшим запасом, проходит AA для крупного текста и проверку 3:1 для элементов и не проходит AAA. Ближайший более тёмный серый, который проходит AA, — #767676, с коэффициентом 4,54.

Проверка	Нужно	#777 на белом
AA, обычный текст	4,5:1	4,48: не пройдено
AA, крупный текст	3:1	Пройдено
AAA, обычный текст	7:1	Не пройдено
AAA, крупный текст	4,5:1	Не пройдено
Кнопки, границы и значки	3:1	Пройдено

Частые вопросы

Какой коэффициент контраста нужен основному тексту?

Для уровня AA стандарта WCAG 2.2 обычный текст требует не менее 4,5:1, а крупный — 3:1. Уровень AAA требует 7:1 для обычного текста и 4,5:1 для крупного.

Почему коэффициент 4,4999 показывается как 4,50 и всё равно не проходит?

Проверка использует точный коэффициент, а не два знака на экране. Коэффициент чуть ниже 4,5 при показе округляется до 4,50, но до 4,5:1 не доходит, поэтому проверка не пройдена.

Меняет ли порядок цветов коэффициент?

Нет. Коэффициент один и тот же, какой цвет текст, а какой фон, потому что более светлый цвет всегда стоит в числителе.

Что такое предлагаемый цвет?

Это цвет текста, ближайший к вашему по яркости, который даёт 4,5:1 на вашем фоне. Он сохраняет тон и насыщенность и становится темнее или светлее — в зависимости от того, какое изменение меньше.

Можно ли ввести цвет с прозрачностью?

Здесь нет. Введите цвет, который видит посетитель, то есть прозрачный цвет, уже смешанный с фоном за ним.

Отправляются ли мои цвета на сервер?

Нет. Вычисление выполняется в вашем браузере, и ничего введённого не сохраняется и не отправляется.

Означает ли пройденный коэффициент, что текст легко читать?

Не всегда. Коэффициент — это минимум, который задаёт WCAG. Размер и толщина шрифта, интервалы и зрение читателя тоже важны, поэтому, где возможно, проверяйте реальный дизайн с людьми.

Источники

Цифры и текст в последний раз проверены вторник, 10 ноября 2026 г..

Результат