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

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

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

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

Веб-дизайнеры используют контраст-чекер при подборе цветовой палитры для новых проектов. 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 — это повышенный стандарт доступности, рекомендуемый для контента, предназначенного широкой аудитории, медицинских и государственных сайтов, образовательных платформ. Достижение уровня AAA не всегда возможно для декоративных элементов, но для основного текстового контента стоит стремиться к этому стандарту.

WCAG (Web Content Accessibility Guidelines) — это международный стандарт доступности веб-контента, разработанный W3C (World Wide Web Consortium). Версия 2.1 опубликована в 2018 году и является актуальным стандартом для проверки доступности сайтов. Стандарт WCAG 2.2 выпущен в 2023 году и расширяет требования, при этом критерии контрастности остались без изменений. В России требования к доступности сайтов регулируются ГОСТ Р 52872-2019. Дата последнего обновления инструмента:

Все расчёты выполняются локально в вашем браузере. Инструмент бесплатный, не требует регистрации и доступен на любом устройстве. Если вы обнаружили неточность или у вас есть предложения по улучшению, напишите нам через форму обратной связи.