Что такое коэффициент контрастности WCAG?
Коэффициент контрастности показывает, насколько хорошо два цвета отличаются друг от друга — чаще всего речь идёт о тексте на фоне. Рекомендации по доступности веб-контента (WCAG 2.x) используют этот показатель, чтобы задать минимальные пороги: благодаря им контент остаётся читаемым для людей со слабым зрением и нарушениями цветовосприятия. Значения варьируются от 1:1 (цвета полностью совпадают) до 21:1 (чистый чёрный на чистом белом).
Как пользоваться калькулятором
Укажите цвет переднего плана (текста) и цвет фона в формате HEX — например, #1a73e8 или в сокращённой записи #fff. Калькулятор линеаризует каждый цвет, вычисляет его относительную яркость и выдаёт коэффициент контрастности вместе с проверкой «прошёл / не прошёл» по каждому порогу WCAG.
Разбор формулы
Коэффициент рассчитывается как \((L_1 + 0{,}05) / (L_2 + 0{,}05)\), где \(L_1\) — относительная яркость более светлого цвета, а \(L_2\) — более тёмного.
$$\text{Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05} \\[1.5em] \text{where}\quad \left\{ \begin{aligned} L_1 &= \max(L_{\text{Foreground}},\, L_{\text{Background}}) \\ L_2 &= \min(L_{\text{Foreground}},\, L_{\text{Background}}) \\ L &= 0.2126\,R_{lin} + 0.7152\,G_{lin} + 0.0722\,B_{lin} \\ c_{lin} &= \begin{cases} \dfrac{c}{12.92} & c \le 0.03928 \\[0.4em] \left(\dfrac{c+0.055}{1.055}\right)^{2.4} & c > 0.03928 \end{cases} \end{aligned} \right.$$Относительная яркость определяется так: каждый канал sRGB переводится в значение от 0 до 1 и линеаризуется (каналы со значением \(0{,}03928\) и ниже делятся на \(12{,}92\); более яркие рассчитываются по формуле \(((c+0{,}055)/1{,}055)^{2{,}4}\)), после чего они объединяются как \(0{,}2126\cdot R + 0{,}7152\cdot G + 0{,}0722\cdot B\). Поправки \(0{,}05\) предотвращают деление на ноль и моделируют рассеянное свечение экрана.
Пример расчёта
Чёрный текст (#000000) на белом фоне (#FFFFFF): яркость чёрного равна \(0\), белого — \(1\). Коэффициент составит
$$\frac{1 + 0.05}{0 + 0.05} = \frac{1.05}{0.05} = 21:1$$— максимально возможное значение, которое с запасом проходит все уровни.
Частые вопросы
Какой контраст мне нужен? Уровень WCAG AA требует \(4{,}5:1\) для обычного текста и \(3:1\) для крупного (≥18pt или 14pt полужирным). Уровень AAA требует \(7:1\) и \(4{,}5:1\) соответственно.
Важен ли порядок цветов? Нет. Формула всегда делит большую яркость на меньшую, поэтому при смене местами переднего плана и фона коэффициент остаётся прежним.
Почему нельзя просто сравнить яркость? Человеческое восприятие цвета нелинейно и сильнее реагирует на зелёный. Именно поэтому при расчёте яркости применяются гамма-коррекция и отдельные коэффициенты для каждого канала, а не простое усреднение.
