Калькулятор контрастности цветов (WCAG Checker)
Калькулятор контрастности цветов онлайн
Наш инструмент помогает веб-дизайнерам и разработчиकों проверять сочетание цветов на соответствие стандартам доступности WCAG 2.1. Введите HEX-коды текста и фона в форму выше, чтобы узнать точный коэффициент контрастности (Contrast Ratio) и получить рекомендации по улучшению читабельности.
Детальный отчет по стандартам (WCAG 2.1)
Глобальный стандарт Web Content Accessibility Guidelines (WCAG) устанавливает жесткие правила для веб-интерфейсов.
Требуется ratio ≥ 4.5
Требуется ratio ≥ 7.0
Требуется ratio ≥ 3.0
Требуется ratio ≥ 4.5
Сравнить с другими фонами
Посмотрите, как текст цвета #FFFFFF выглядит на популярных базовых оттенках:
Подобрать другой цвет текста
Альтернативные цвета шрифта для текущего фона #000000:
🎨 Калькулятор контрастности цветов (WCAG Checker) и подбор палитры
Этот инструмент решает две главные задачи современного UI/UX-дизайна: помогает подобрать красивое цветовое сочетание и гарантирует, что текст будет легко читаться. Мы используем международные стандарты Web Content Accessibility Guidelines (WCAG 2.1) и российского ГОСТ Р 52872-2019, чтобы ваши макеты сайтов, презентаций и интерфейсов в Figma были инклюзивными и удобными для всех пользователей, включая людей со слабым зрением.
🚀 Что умеет этот инструмент веб-доступности?
- ✅ Проверка контраста (Contrast Ratio): мгновенно рассчитывает коэффициент между фоном и текстом по математической формуле яркости.
- ⚖️ Точная оценка по WCAG: сообщает, проходит ли ваша пара цветов проверку на стандарты AA (хорошо) или AAA (идеально) для разных размеров шрифта.
- 🎨 Умный генератор палитры: автоматически создает градации светлых и темных оттенков выбранного цвета для создания UI-китов.
- 🔄 Встроенный конвертер: переводит цвета между форматами HEX, RGB и HSL в один клик.
Как пользоваться чекером контрастности?
Интерфейс разделен на две логические зоны: настройки цвета фона и цвета текста. Все изменения отображаются в реальном времени.
- Задайте исходные цвета: кликните по большому цветовому полю (откроется системная палитра) или введите код (например,
#FFFFFF) вручную в поле HEX. - Следите за бейджем доступности: в верхней части экрана (в блоке превью) вы увидите итоговую оценку — например, 4.5:1 (Уровень AA).
- Используйте готовые оттенки: рядом с основным цветом генерируются полоски с вариациями яркости (Light/Dark). Кликайте по ним, чтобы быстро подобрать более контрастный и читаемый вариант, не уходя далеко от фирменного стиля.
Как рассчитывается контрастность? (Формула)
Коэффициент контрастности — это математическая разница в относительной яркости (luminance) между двумя цветами. Контрастность рассчитывается по формуле (L1 + 0.05) / (L2 + 0.05), где L1 — относительная яркость самого светлого из цветов, а L2 — относительная яркость самого темного.
Значение варьируется от 1:1 (абсолютно одинаковые цвета, текст невидим) до 21:1 (черный текст на белом фоне — максимальный контраст).
Почему веб-доступность важна для SEO и UX?
В 2026 году поисковые системы (Google, Яндекс) активно учитывают поведенческие факторы и Core Web Vitals. Если вы разместите светло-серый текст на белом фоне, пользователям придется напрягать глаза, что приведет к росту отказов (Bounce Rate). Кроме того, адаптивность и доступность сайта напрямую влияют на ранжирование мобильной выдачи.
Уровень AA (Минимум)
Коэффициент 4.5:1 для обычного текста.
Коэффициент 3:1 для крупного текста (от 18pt или 24px, а также 14pt жирного шрифта).
Это золотой стандарт для большинства коммерческих сайтов, интернет-магазинов и приложений.
Уровень AAA (Идеал)
Коэффициент 7:1 для обычного текста.
Коэффициент 4.5:1 для крупного текста.
Строго рекомендуется для государственных порталов, медицинских сайтов и лонгридов с большим количеством текста.
Частые вопросы (FAQ)
❓ Что такое HSL и зачем он нужен дизайнерам?
HSL (Hue, Saturation, Lightness) — это цветовая модель, где цвет описывается через оттенок, насыщенность и яркость. UI/UX дизайнерам с ним работать удобнее, чем с HEX. Чтобы сделать цвет темнее для улучшения контраста, достаточно просто уменьшить параметр Lightness, не искажая сам оттенок.
❓ Какой контраст считается плохим и нечитаемым?
Любое значение ниже 3:1 считается трудночитаемым для людей с нормальным зрением и практически невидимым для пользователей с нарушениями зрения (дальтонизм, астигматизм). Наш инструмент пометит такие сочетания красным цветом и статусом «Провал».
❓ Влияет ли низкий контраст текста на SEO?
Напрямую Google не штрафует за цвета, но плохой контраст ухудшает пользовательский опыт (UX). Пользователи быстрее закрывают такие вкладки, что снижает Dwell Time (время удержания). Алгоритмы интерпретируют это как некачественный контент, что ведет к падению позиций.
❓ Как быстро скопировать нужный цвет?
Просто нажмите иконку копирования рядом с полем HEX, RGB или HSL. Код автоматически скопируется в буфер обмена вашего устройства.