Что такое калькулятор контрастности?
Этот инструмент вычисляет коэффициент контрастности между цветом текста (переднего плана) и цветом фона по официальной формуле стандарта WCAG 2.x. Контрастность — один из ключевых показателей доступности: она показывает, будет ли текст читаемым для людей со слабым зрением или нарушениями цветовосприятия. Значения варьируются от 1:1 (одинаковые цвета, текст невидим) до 21:1 (чёрный на белом).
Как пользоваться
Укажите значения красного, зелёного и синего каналов (от 0 до 255) для цвета текста и цвета фона. Калькулятор линеаризует каждый канал, рассчитывает относительную яркость обоих цветов и делит более светлый показатель на более тёмный, добавив константу 0,05, которая учитывает рассеянный свет. После этого он сообщает, проходит ли выбранная пара цветов проверку WCAG AA и AAA для обычного и крупного текста.
Разбор формулы
Коэффициент контрастности равен \((L_1 + 0.05) / (L_2 + 0.05)\), где \(L_1\) — относительная яркость более светлого цвета, а \(L_2\) — более тёмного.
$$\text{Contrast} = \frac{L_1 + 0.05}{L_2 + 0.05}$$$$\text{где}\quad \left\{ \begin{aligned} L_1 &= \max(L_{fg},\, L_{bg}) \\ L_2 &= \min(L_{fg},\, L_{bg}) \\ L &= 0.2126\,R_{\ell} + 0.7152\,G_{\ell} + 0.0722\,B_{\ell} \\ C_{\ell} &= \begin{cases} \dfrac{C/255}{12.92} & C/255 \le 0.03928 \\[0.6em] \left(\dfrac{C/255 + 0.055}{1.055}\right)^{2.4} & \text{иначе} \end{cases} \end{aligned} \right.$$Относительная яркость рассчитывается так: сначала каждый канал приводится к диапазону 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,0,0) на белом фоне (255,255,255): яркость чёрного = 0, яркость белого = 1. Коэффициент:
$$\frac{1 + 0.05}{0 + 0.05} = \frac{1{,}05}{0{,}05} = \mathbf{21:1}$$— максимально возможный контраст, который с запасом проходит любой уровень WCAG.
Частые вопросы
Какой коэффициент нужен? Уровень WCAG AA требует 4,5:1 для обычного текста и 3:1 для крупного (от 18pt или 14pt полужирным). Уровень AAA — 7:1 и 4,5:1 соответственно.
Влияет ли порядок цветов? Нет — формула всегда делит большую яркость на меньшую, поэтому при смене местами текста и фона коэффициент остаётся прежним.
Зачем прибавлять 0,05? Эта константа моделирует рассеянное свечение экрана, благодаря чему даже чёрный на чёрном даёт конечное, а не бесконечное значение.
