Проверка контраста цветов

Проверка контраста цветов онлайн — WCAG 2.1 checker бесплатно

Профессиональный онлайн-инструмент для проверки контрастного соотношения между цветом фона и текста по стандарту WCAG 2.1 (Web Content Accessibility Guidelines). Контраст-чекер помогает дизайнерам, разработчикам и владельцам сайтов убедиться, что текст на странице читается всеми пользователями, включая людей с нарушениями зрения. Калькулятор контраста мгновенно рассчитывает коэффициент контрастности и проверяет соответствие пяти основным критериям доступности: обычный текст AA и AAA, крупный текст AA и AAA, а также UI-компоненты AA. Все вычисления выполняются локально в браузере — ваши данные никуда не отправляются.

Цветовая доступность сайта — это не только юридическое требование во многих странах, но и вопрос удобства для миллионов пользователей. По данным ВОЗ, более 2,2 миллиарда человек в мире имеют нарушения зрения. Низкий контраст текста к фону делает контент нечитаемым для значительной части аудитории. Наш инструмент проверки контраста позволяет быстро оценить читаемость любой цветовой комбинации и при необходимости получить рекомендации по исправлению. Поддерживается ввод цветов в форматах HEX и RGB, интерактивный выбор через палитру, готовые пресеты популярных цветовых пар и генератор случайных доступных комбинаций.

Инструмент особенно полезен при разработке дизайн-систем, создании макетов в Figma, проверке верстки перед релизом, аудите существующих сайтов на доступность (accessibility audit) и подготовке к сертификации по WCAG 2.1. Контраст-чекер на ТулФокс отображает живой предпросмотр текста разных размеров, элементы интерфейса и подробную таблицу результатов по каждому критерию WCAG. Если соотношение контраста недостаточное, инструмент автоматически подбирает ближайшие цвета, которые пройдут проверку, — вы можете применить рекомендацию в один клик.

Ключевые возможности проверки контраста:

• Мгновенный расчет контрастного соотношения по формуле WCAG 2.1 (относительная яркость)
• Проверка по всем пяти критериям: обычный текст AA/AAA, крупный текст AA/AAA, UI-компоненты AA
• Живой предпросмотр текста в пяти размерах — от заголовка до мелких примечаний
• Ввод цвета в HEX и RGB, интерактивная палитра браузера
• 12 готовых пресетов проверенных цветовых комбинаций
• Генерация случайных доступных пар цветов с соотношением от 4.5:1
• Автоматические рекомендации ближайших цветов при недостаточном контрасте
• Копирование результатов и CSS-кода в один клик
• Полностью клиентская обработка — безопасность и конфиденциальность

Кому нужна проверка контраста цветов?

Веб-дизайнеры используют контраст-чекер при подборе цветовой палитры для новых проектов. UX/UI-дизайнеры проверяют макеты на соответствие стандартам доступности перед передачей в разработку. Фронтенд-разработчики тестируют вёрстку и темные темы. SEO-специалисты и маркетологи проверяют контраст на лендингах и рекламных страницах, где читаемость напрямую влияет на конверсию. Владельцы сайтов и интернет-магазинов проводят аудит доступности для соответствия законодательным требованиям (ADA, EN 301 549, ГОСТ Р 52872-2019). Контент-менеджеры проверяют публикации и баннеры перед размещением на сайте.

Что такое контрастное соотношение и как оно рассчитывается?

Контрастное соотношение (contrast ratio) — это числовое значение от 1:1 (нет контраста — одинаковые цвета) до 21:1 (максимальный контраст — чёрный на белом). Расчет выполняется по формуле из спецификации WCAG 2.1: сначала определяется относительная яркость (relative luminance) каждого цвета с учётом гамма-коррекции sRGB, затем вычисляется отношение (L1 + 0.05) / (L2 + 0.05), где L1 — большая яркость, L2 — меньшая. Стандарт WCAG 2.1 устанавливает минимальные требования к контрасту: уровень AA требует соотношения не менее 4.5:1 для обычного текста и 3:1 для крупного текста (от 18px или 14px bold), а уровень AAA — 7:1 и 4.5:1 соответственно.

Разница между уровнями AA и AAA

Уровень AA — это минимальный рекомендуемый стандарт доступности, который должен быть выполнен на каждом сайте. Он обеспечивает достаточную читаемость для большинства пользователей, включая людей со слабым зрением. Уровень AAA — это повышенный стандарт доступности, рекомендуемый для контента, предназначенного широкой аудитории, медицинских и государственных сайтов, образовательных платформ. Достижение уровня AAA не всегда возможно для декоративных элементов, но для основного текстового контента стоит стремиться к этому стандарту.