Калькулятор контрастности цветов WCAG
Измерьте коэффициент контрастности WCAG между цветом переднего плана и фоном, чтобы убедиться в читаемости и доступности вашего текста.
Higher is more readable (max 21:1)
- 1
Fg relative luminance
0.2126×0,0103 + 0.7152×0,0103 + 0.0722×0,0103 = 0,0103Each sRGB channel is gamma-linearised (transfer function) then weighted per WCAG - 2
Bg relative luminance
0.2126×1 + 0.7152×1 + 0.0722×1 = 1 - 3
Contrast ratio
(1 + 0.05) ÷ (0,0103 + 0.05) = 17,40
Как работает этот калькулятор?
Коэффициент контрастности WCAG вычисляется как (большая яркость + 0.05) / (меньшая яркость + 0.05) и принимает значения от 1:1 до 21:1. Для прохождения уровня AA необходимо не менее 4.5:1 для обычного текста и 3:1 для крупного; для уровня AAA — 7:1 и 4.5:1 соответственно. Введите два hex-цвета для мгновенной проверки.
Формула
How this is calculated
Введите цвет переднего плана (текста) и цвет фона в формате hex. Принимаются как 3-значная сокращённая запись (#fff), так и 6-значная (#ffffff), с ведущим '#' или без него.
Каждый цвет преобразуется в относительную яркость. Значение 8-битного канала делится на 255, затем линеаризуется: если результат s не превышает 0.03928, он делится на 12.92, в противном случае вычисляется ((s + 0.055) / 1.055) в степени 2.4. Линеаризованные значения красного, зелёного и синего взвешиваются с коэффициентами 0.2126, 0.7152 и 0.0722 соответственно и суммируются, давая яркость L. Коэффициент контрастности равен (Llighter + 0.05) / (Ldarker + 0.05), где слагаемое 0.05 моделирует рассеянный свет. Значения варьируются от 1:1 (идентичные цвета) до 21:1 (чёрный на белом).
Пороговые значения WCAG 2.1 определяют результаты проверки: уровень AA требует не менее 4.5:1 для обычного текста и 3:1 для крупного (примерно 18pt обычного или 14pt жирного); уровень AAA — 7:1 для обычного и 4.5:1 для крупного. Вычисление симметрично, поэтому смена местами переднего плана и фона даёт тот же результат. Инструмент оценивает только цвет и не учитывает прозрачность, сглаживание или перекрывающиеся слои.
Часто задаваемые вопросы
Не менее 4.5:1 для обычного текста и 3:1 для крупного (около 18pt обычного или 14pt жирного). Для более строгого уровня AAA необходимо 7:1 для обычного и 4.5:1 для крупного.
Нет. Формула использует большую и меньшую яркость независимо от того, какой цвет назначен передним планом, поэтому перестановка двух входных значений даёт тот же результат.
Чистый белый имеет относительную яркость 1, а чистый чёрный — 0. Подставив эти значения в (1 + 0.05) / (0 + 0.05), получаем ровно 21 — наибольшая достижимая контрастность.
Также известен как
TG we-Calculate Editorial Team. (2026). Калькулятор контрастности цветов WCAG [Online calculator]. TG we-Calculate. https://we-calculate.com/ru/calculator/color-contrast-ratio-calculator
TG we-Calculate Editorial Team. "Калькулятор контрастности цветов WCAG." TG we-Calculate. 2026. https://we-calculate.com/ru/calculator/color-contrast-ratio-calculator.
TG we-Calculate Editorial Team, "Калькулятор контрастности цветов WCAG," TG we-Calculate, 2026. [Online]. Available: https://we-calculate.com/ru/calculator/color-contrast-ratio-calculator
@misc{wecalculate_color_contrast_ratio_calculator, title = {Калькулятор контрастности цветов WCAG}, author = {{TG we-Calculate Editorial Team}}, howpublished = {\url{https://we-calculate.com/ru/calculator/color-contrast-ratio-calculator}}, year = {2026}, note = {TG we-Calculate} }
Этот калькулятор вам помог?