Проверка контраста цветов (WCAG)
Проверьте контрастность цветов по стандарту WCAG 2.1 для доступности сайта
Пример текста для проверки контрастности
Так будет выглядеть текст на выбранном фоне. Проверьте, насколько легко его читать. Хорошая контрастность повышает доступность и удобство чтения для всех пользователей, включая людей с нарушениями зрения.
Проверка контраста цветов по WCAG онлайн — бесплатный инструмент доступности
Онлайн-проверка контраста цветов по стандарту WCAG 2.1 — незаменимый инструмент для дизайнеров, веб-разработчиков, контент-менеджеров и всех, кто заботится о доступности (accessibility) своего сайта, приложения или любого цифрового продукта. Калькулятор контрастности позволяет мгновенно определить коэффициент контраста между любыми двумя цветами и проверить, соответствует ли выбранная цветовая комбинация требованиям WCAG уровня AA и AAA для обычного текста, крупного текста и графических элементов интерфейса. Расчёт контрастности выполняется по формуле относительной яркости (relative luminance), определённой в спецификации WCAG 2.1 от W3C (Web Content Accessibility Guidelines), что гарантирует точность результатов, полностью соответствующих международным стандартам веб-доступности.
Проверка контраста цветов — обязательный этап при разработке и аудите доступности любого веб-ресурса, мобильного приложения и дизайн-макета. Требования WCAG к контрастности текста законодательно закреплены во многих странах мира: в Евросоюзе действует Директива о доступности веб-контента (EU Directive 2016/2102), в США — раздел 508 Закона о реабилитации (Section 508) и ADA (Americans with Disabilities Act), в России Национальный стандарт ГОСТ Р 52872 рекомендует соблюдать принципы доступности для людей с ограниченными возможностями здоровья. Наш калькулятор контрастности помогает привести ваш проект в соответствие с этими нормами быстро и без ошибок.
Помимо базовой проверки коэффициента контраста, инструмент предоставляет развёрнутый анализ: определяет, проходит ли цветовая пара критерии AA и AAA для обычного текста (минимум 4.5:1 и 7:1 соответственно), крупного текста (от 3:1 и 4.5:1) и элементов пользовательского интерфейса (от 3:1). При несоответствии стандартам калькулятор автоматически подбирает ближайший цвет, который обеспечит прохождение нужного уровня WCAG, сохраняя при этом оттенок и насыщенность исходного цвета. Это значительно экономит время дизайнера, который может скорректировать макет в один клик.
Дополнительно доступна функция симуляции нарушений цветового зрения (дальтонизма), позволяющая увидеть, как вашу цветовую пару воспринимают люди с протанопией, дейтеранопией, тританопией или ахроматопсией. Это позволяет убедиться, что ваш контент одинаково доступен для пользователей с любым типом цветового зрения — а это около 300 миллионов человек в мире (по данным WHO).
Все вычисления выполняются локально в вашем браузере — никакие данные не отправляются на сервер. Вы можете использовать инструмент проверки контраста цветов WCAG в любое время, бесплатно, без регистрации, с любого устройства: компьютера, смартфона или планшета. Интерфейс адаптивный, полностью на русском языке, результаты легко скопировать и вставить в отчёт по аудиту доступности или в техническое задание для разработчиков.
Ключевые возможности проверки контраста цветов:
- Мгновенный расчёт коэффициента контрастности по стандарту WCAG 2.1
- Проверка соответствия уровням AA и AAA для обычного текста, крупного текста и элементов UI
- Ввод цветов в форматах HEX и RGB, а также через встроенную палитру (color picker)
- Автоматический подбор ближайшего цвета, проходящего AA или AAA
- Предварительный просмотр текста и элементов интерфейса с настройкой размера и толщины шрифта
- Симуляция четырёх типов нарушений цветового зрения (дальтонизма)
- Библиотека из 12 готовых цветовых пар с показателями контрастности
- Экспорт результатов и CSS-кода в буфер обмена
- Отображение дополнительных форматов: HSL, относительная яркость
Для кого предназначен инструмент проверки контраста?
Инструмент будет полезен широкому кругу специалистов и пользователей. Веб-дизайнеры и UI/UX-дизайнеры используют калькулятор контрастности при разработке макетов, подборе цветовых схем и проверке палитры на доступность. Фронтенд-разработчики проверяют итоговые стили CSS прямо в браузере. SEO-специалисты контролируют читаемость текста для улучшения юзабилити, которое влияет на поведенческие факторы и ранжирование. Контент-менеджеры и редакторы проверяют контрастность текстовых блоков, баннеров и кнопок перед публикацией. QA-инженеры и аудиторы доступности формируют отчёты о соответствии WCAG. Владельцы бизнеса и маркетологи обеспечивают доступность своих сайтов для максимально широкой аудитории, включая пользователей со слабым зрением и дальтонизмом.
Что такое WCAG и зачем проверять контрастность?
WCAG (Web Content Accessibility Guidelines) — это набор рекомендаций по обеспечению доступности веб-контента, разработанный консорциумом W3C. Стандарт определяет минимальные требования к контрасту текста и фона, чтобы контент был читаемым для людей с различными нарушениями зрения. Уровень AA считается минимально допустимым для большинства сайтов и приложений, уровень AAA — расширенным стандартом доступности для критически важных сервисов, медицинских и государственных порталов. Проверка контрастности цветов на соответствие WCAG — базовый шаг к созданию инклюзивного цифрового продукта, доступного для всех без исключения пользователей.
Как проверить контрастность цветов: пошаговая инструкция
Выберите цвет текста и цвет фона
Введите цвета в формате HEX (например, #1a1a2e) или RGB (26, 26, 46) в соответствующие поля. Также можно воспользоваться палитрой — кликните по цветному квадрату рядом с полем ввода. Переключение между HEX и RGB форматами осуществляется кнопками в верхней панели. Инструмент автоматически конвертирует значения между форматами.
Ознакомьтесь с результатами проверки WCAG
Результат отображается мгновенно: коэффициент контрастности, статус прохождения уровней AA и AAA для обычного текста, крупного текста и элементов интерфейса. Зелёная отметка означает, что пара цветов соответствует стандарту WCAG, красная — что контраст недостаточен. Визуальная шкала помогает быстро оценить, насколько контраст близок к пороговым значениям.
При необходимости скорректируйте цвета
Если контрастность не проходит нужный уровень WCAG, инструмент автоматически предложит ближайшие подходящие цвета. Кликните по рекомендации, чтобы мгновенно применить исправленный цвет. Оцените результат в блоке предварительного просмотра, настройте размер и начертание шрифта. Также используйте симуляцию дальтонизма для дополнительной проверки доступности.
Скопируйте результат или CSS-код
Нажмите кнопку для копирования полного отчёта с коэффициентом контрастности и статусом всех критериев WCAG. Также доступно копирование готового CSS-кода с парой цветов, который можно вставить прямо в стили вашего проекта.
Примеры использования проверки контраста цветов
🎨 Разработка дизайн-системы
При создании дизайн-системы для корпоративного сайта дизайнер проверяет каждую пару из палитры (цвет текста, фон кнопки, цвет ссылки на разных подложках) на соответствие WCAG AA. Инструмент позволяет быстро перебрать десятки комбинаций и сразу получить рекомендации по исправлению недостаточного контраста. Результат — доступная, сертифицированная палитра для всей команды.
📱 Аудит мобильного приложения
QA-инженер проверяет контрастность всех текстовых элементов приложения перед релизом. Особое внимание — подписям на цветных карточках, placeholder-тексту в полях ввода и иконкам на кнопках. Для каждого несоответствия формируется рекомендация с альтернативным цветом, которую можно передать дизайнеру в один клик.
📊 Подготовка отчёта по доступности
Аудитор доступности формирует отчёт по WCAG для государственного портала. С помощью инструмента он фиксирует все цветовые пары, их коэффициенты контраста и статус прохождения AA/AAA, копирует данные и включает в итоговый документ. Симуляция дальтонизма используется для демонстрации проблем пользователям-заказчикам.
🏫 Образовательный проект
Студент-дизайнер изучает основы веб-доступности и использует калькулятор контрастности, чтобы понять, как разные цветовые комбинации влияют на читаемость. Готовые пресеты и живой предварительный просмотр помогают наглядно увидеть разницу между контрастными и низкоконтрастными парами, а симуляция дальтонизма открывает совершенно новый взгляд на выбор цвета.
Минимальные требования WCAG к контрастности
| Элемент | AA (минимум) | AAA (расширенный) |
|---|---|---|
| Обычный текст (<18pt / <14pt bold) | 4.5:1 | 7:1 |
| Крупный текст (≥18pt / ≥14pt bold) | 3:1 | 4.5:1 |
| Графические элементы и UI-компоненты | 3:1 | — |
| Логотипы и декоративный текст | Нет требований | |
Частые вопросы о проверке контраста цветов WCAG
WCAG (Web Content Accessibility Guidelines) — международный стандарт доступности веб-контента, разработанный W3C. Проверка контрастности — одно из базовых требований WCAG. Она гарантирует, что текст, ссылки и элементы интерфейса на вашем сайте будут читаемы для людей с различными нарушениями зрения: слабовидящих, людей с дальтонизмом, пожилых пользователей. Коэффициент контрастности рассчитывается по формуле, учитывающей относительную яркость (luminance) двух цветов, и может принимать значения от 1:1 (нет контраста) до 21:1 (максимальный контраст: чёрный на белом).
Уровень AA — обязательный минимум для большинства сайтов: контраст 4.5:1 для обычного текста и 3:1 для крупного текста. Уровень AAA — расширенный стандарт, который рекомендуется для критически важных сервисов: 7:1 для обычного текста и 4.5:1 для крупного. AAA обеспечивает лучшую читаемость, но достичь его для всех элементов дизайна сложнее. Если вы создаёте государственный портал, медицинский или банковский сервис, стремитесь к AAA. Для коммерческих сайтов достаточно AA.
По стандарту WCAG крупный текст — это текст размером не менее 18 пунктов (24px) при обычном начертании или не менее 14 пунктов (18.66px) при жирном начертании (bold). Для крупного текста допускается пониженный порог контрастности: 3:1 вместо 4.5:1 для уровня AA. Наш инструмент позволяет задать размер и начертание шрифта, чтобы точно определить, к какой категории относится ваш текст.
Коэффициент контрастности рассчитывается по формуле (L1 + 0.05) / (L2 + 0.05), где L1 — относительная яркость более светлого цвета, а L2 — более тёмного. Относительная яркость (luminance) вычисляется из линейных значений RGB-компонентов по формуле: L = 0.2126R + 0.7152G + 0.0722B, где R, G, B — значения каналов после гамма-коррекции. Наш калькулятор выполняет все эти вычисления автоматически и мгновенно.
Около 8% мужчин и 0.5% женщин в мире имеют тот или иной вид нарушения цветового зрения (дальтонизм). Симуляция позволяет увидеть вашу цветовую пару глазами таких пользователей. Например, красно-зелёная цветовая комбинация может быть абсолютно нечитаемой для людей с протанопией или дейтеранопией, даже если формально проходит проверку WCAG. Используйте симуляцию как дополнительную проверку доступности вашего дизайна.
Нет, абсолютно все вычисления выполняются локально в вашем браузере. Ни цвета, ни результаты проверки не покидают ваше устройство. Инструмент работает полностью на стороне клиента, без какого-либо обмена данными с сервером. Вы можете использовать проверку контраста цветов даже в офлайн-режиме после загрузки страницы.
Нажмите правой кнопкой мыши на нужный элемент и выберите «Инспектировать элемент» (Inspect). В панели стилей (Styles) найдите свойство color (для текста) или background-color (для фона) — рядом будет отображён цвет в формате HEX, RGB или HSL. Также можно использовать расширения для браузера: ColorZilla, Eye Dropper, Colour Contrast Analyser. Скопируйте HEX-код и вставьте в наш инструмент для проверки контрастности.
💡 Советы по обеспечению доступной цветовой контрастности
- Всегда проверяйте контрастность для всех состояний элементов: обычного, наведения (hover), фокуса (focus) и неактивного (disabled)
- Не полагайтесь только на цвет для передачи информации — дополняйте текстовыми подписями и иконками
- Placeholder-текст в полях ввода тоже должен быть читаемым — проверяйте его контрастность
- Тестируйте дизайн с помощью симуляции дальтонизма, даже если формально WCAG пройден
- Используйте готовые доступные палитры (например, из Material Design или IBM Design Language)
- Для тёмных тем контрастность так же важна — проверяйте светлый текст на тёмном фоне
- Документируйте проверенные цветовые пары в гайдлайнах дизайн-системы для всей команды
ℹ️ Дополнительная информация
Инструмент проверки контраста цветов WCAG постоянно обновляется и совершенствуется. Последнее обновление:
Все расчёты соответствуют спецификации WCAG 2.1 Success Criterion 1.4.3 (Contrast — Minimum), 1.4.6 (Contrast — Enhanced) и 1.4.11 (Non-text Contrast). Формула относительной яркости и контрастности взята из официального документа W3C "Techniques for WCAG 2.1".
Если вы обнаружили неточность или у вас есть предложения по улучшению инструмента — воспользуйтесь формой обратной связи. Мы ценим каждый отзыв и стремимся сделать проверку контраста цветов максимально точной и удобной.
Комментарии (1)
Загрузка комментариев...
🎨Похожие инструменты
Генератор оттенков и тонов
Создайте палитру тонов и оттенков любого цвета с экспортом в CSS, SCSS и Tailwind
Калькулятор межстрочного интервала
Расчёт и конвертация межстрочного интервала (line-height) между px, pt, em, rem, %, множитель, мм, см
Калькулятор модульной шкалы
Рассчитайте пропорциональные размеры шрифтов по модульной шкале
Калькулятор CSS clamp()
Генератор адаптивных CSS-значений для font-size, padding, margin и других свойств
Финансовые продукты
с максимальной выгодой
Подобрали лучшие условия от проверенных банков и финансовых компаний России