Калькулятор коэффициента контрастности цветов

• Мгновенный расчёт коэффициента контрастности: считайте коэффициент WCAG между двумя цветами прямо во время ввода. Калькулятор обновляется в реальном времени — без нажатия кнопок — чтобы вы могли итеративно работать с палитрой.
• Безопасный онлайн-калькулятор контраста: все расчёты выполняются локально в браузере. Ваши значения цветов никогда не покидают устройство — 100% конфиденциальность при использовании нашего онлайн-калькулятора.
• Калькулятор коэффициента контрастности — без установки: пользуйтесь калькулятором прямо в любом браузере, без загрузок, плагинов и дизайнерского ПО. Проверяйте соответствие WCAG с любого устройства мгновенно.
• Полная проверка соответствия WCAG 2.1 AA и AAA: получайте мгновенные результаты «пройдено/не пройдено» для уровней WCAG 2.1 AA и AAA по обычному тексту, крупному тексту и элементам интерфейса. Включает живой предпросмотр текста.

• Соответствие веб-доступности: дизайнеры и разработчики используют калькулятор, чтобы сайты соответствовали требованиям WCAG 2.1 AA до запуска. Раннее обнаружение проблем контраста избавляет от дорогих аудитов и юридических рисков.
• Подбор цветов интерфейса и бренда: при создании дизайн-системы или палитры бренда проверяйте каждую комбинацию «передний план/фон» на соответствие WCAG. Найдите минимальный оттенок цвета бренда, проходящий контраст AA на белом или тёмном фоне.
• Дизайн кнопок и CTA: кнопки призыва к действию должны соответствовать коэффициенту 3:1 для элементов интерфейса по WCAG 2.1. Проверьте цвет текста кнопки относительно фона кнопки перед публикацией.
• Палитры тёмной темы: тёмная тема создаёт новые проблемы контраста — цвета, проходящие на светлом фоне, часто не проходят на тёмном. Проверяйте каждую пару «текст/фон» в светлых и тёмных темах.
• Доступность форм и полей ввода: текст-заполнитель, подписи, подсказки и сообщения об ошибках нуждаются в достаточном контрасте. Проверяйте каждый текстовый элемент относительно фона для слабовидящих пользователей.
• Визуализация данных и графики: подписи графиков, текст легенд и аннотации точек данных должны быть читаемы на фоне графика. Проверяйте соответствие цветов визуализации стандартам доступности.

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

1. 1. Введите цвета: введите цвет в формате HEX (#rrggbb), RGB (rgb(r,g,b)) или HSL (hsl(h,s%,l%)) в поля переднего плана и фона либо нажмите образец, чтобы открыть системный выбор цвета. Калькулятор принимает сокращённый HEX (#rgb) и варианты с альфой. Вся обработка происходит локально в браузере.
2. 2. Мгновенный расчёт в реальном времени: коэффициент обновляется сразу при вводе — нажимать кнопку не нужно. Калькулятор преобразует каждый цвет в относительную яркость по формуле линеаризации sRGB WCAG, затем считает коэффициент как (L1 + 0,05) / (L2 + 0,05), где L1 — светлее, L2 — темнее.
3. 3. Проверьте соответствие WCAG: панель результатов показывает статус «пройдено/не пройдено» для WCAG 2.1 AA и AAA в трёх контекстах: обычный текст, крупный текст и элементы интерфейса. Живой предпросмотр показывает, как комбинация выглядит при разных размерах текста.

• AA - Обычный текст (4,5:1): минимальный коэффициент для основного текста, подписей и любого текста меньше 18pt (или 14pt полужирного). Это стандартное требование для соответствия WCAG 2.1 уровня AA — правовая база в большинстве юрисдикций.
• AA - Крупный текст (3:1): крупным считается текст 18pt (24px) и больше или 14pt (около 18,67px) полужирный и больше. Требует меньшего минимального коэффициента, так как легче читается при низком контрасте.
• AA - Элементы интерфейса (3:1): графические объекты и элементы интерфейса — поля форм, кнопки, индикаторы фокуса, иконки — должны иметь коэффициент 3:1 относительно соседних цветов по критерию успеха 1.4.11 WCAG 2.1.
• AAA - Улучшенный (7:1): уровень AAA требует 7:1 для обычного текста и 4,5:1 для крупного. Соответствие AAA рекомендуется для критичного контента (юридические документы, медицинская информация, госуслуги), но не обязательно для общей веб-соответствия.

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