👁 Проверка контрастности цветов по стандарту WCAG 2.1
Расчет относительной яркости двух цветов и коэффициента контрастности с официальной валидацией доступности текста по спецификациям W3C WCAG 2.1 (уровни AA и AAA).
Contrast Ratio
8.42 : 1
WCAG AA Normal:PASS
WCAG AA Large:PASS
WCAG AAA Normal:PASS
WCAG AAA Large:PASS
Readable Text Sample
Color Values (HEX / RGB / HSL)
HEX: #38bdf8 RGB: rgb(56, 189, 248) HSL: hsl(198, 93%, 70%)
Сравнение A/B:
📐 Формула относительной яркости W3C WCAG 2.1 и контрастности (Contrast Ratio)
L = 0.2126*R_lin + 0.7152*G_lin + 0.0722*B_lin
Контраст = (L1 + 0.05) / (L2 + 0.05)
Норма AA текст: >= 4.5:1; Крупный: >= 3.0:1
Норма AAA текст: >= 7.0:1; Крупный: >= 4.5:1
Коэффициент контрастности вычисляется как (L1 + 0.05) / (L2 + 0.05), где L1 — относительная яркость более светлого цвета, а L2 — более темного цвета в диапазоне от 1:1 до 21:1.
📊 Проверка соответствия стандартам доступности AA (4.5:1) и AAA (7:1)
Проверенный эталон: Белый текст (#ffffff, L=1.0) на темно-синем фоне (#0f172a, L=0.01) дает контрастность 17.5:1 — успешно проходит все тесты WCAG 2.1 уровня AAA для мелкого и крупного шрифта.
⚠️ Игнорирование темновой адаптации человеческого зрения при инверсии полярности
Важное замечание: Стандарт WCAG 2.1 не учитывает размер шрифта при инверсии полярности (темный текст на светлом фоне воспринимается глазом иначе, чем светлый на темном). Для учета восприятия используйте APCA.
♿ Сравнение стандартов WCAG 2.1 и будущего стандарта APCA
Для более точной психофизической оценки современного UI рекомендуем протестировать цвета в калькуляторе APCA контраста.
🔗 Связанные инструменты
Рекомендуемые калькуляторы и утилиты для непрерывного студийного процесса: