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

Тестирование соответствия контрастности WCAG 2.1 AA/AAA для доступного веб-дизайна

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

Цвет переднего плана (текст)

Цвет фона

Коэффициент контрастности

21:1

AA обычный текст

Пройдено

AA крупный текст

Пройдено

AAA обычный текст

Пройдено

AAA крупный текст

Пройдено

Предварительный просмотр

Крупный текст (18pt+) Так будет выглядеть обычный основной текст (14px) с выбранной цветовой комбинацией. Убедитесь в достаточной контрастности для читаемости.

Доступные альтернативы

Все уровни контрастности пройдены! Рекомендации не требуются.

Требования WCAG 2.1

Уровень	Обычный	Крупный
AA	4.5:1	3:1
AAA	7:1	4.5:1

Вся обработка происходит в вашем браузере. Данные не отправляются на сервер.

Возможности

Соответствие WCAG 2.1

Тестирование уровней AA и AAA для обычного и крупного текста по официальным рекомендациям WCAG 2.1

Предварительный просмотр

Просматривайте цветовую комбинацию в реальном времени с образцами текста разных размеров

Умные рекомендации

Автоматическое предложение доступных цветовых альтернатив при несоответствии требованиям контрастности

Конфиденциальность

Все вычисления выполняются локально в вашем браузере, данные не отправляются на серверы

Как использовать?

Выберите цвета

Введите цвет переднего плана (текст) и фона с помощью палитры или поля ввода HEX.

Проверьте результаты

Посмотрите коэффициент контрастности и статус соответствия WCAG AA/AAA для обычного и крупного текста.

Примените рекомендации

Если контрастность не проходит, нажмите на предложенный доступный цвет для мгновенного применения.

Часто задаваемые вопросы

WCAG (Web Content Accessibility Guidelines) — международный стандарт веб-доступности, опубликованный организацией W3C. Требования к коэффициенту контрастности обеспечивают читаемость текста для пользователей со слабым зрением, дальтонизмом или когнитивными нарушениями. Несоответствие WCAG 2.1 также является проблемой правового соответствия во многих странах согласно законам ADA (США), EN 301 549 (ЕС) и Equality Act (Великобритания).

Уровень AA (минимальный): обычный текст требует 4.5:1, крупный текст — 3:1. Уровень AAA (расширенный): обычный текст требует 7:1, крупный текст — 4.5:1. Крупным считается текст размером 18pt (24px) и более обычного начертания, или 14pt (около 18.67px) и более полужирного начертания. Большинство организаций ориентируются на уровень AA; AAA рекомендуется для критически важного контента, например медицинских или юридических текстов.

Формула WCAG: (L1 + 0.05) / (L2 + 0.05), где L1 — относительная яркость более светлого цвета, L2 — более тёмного. Относительная яркость вычисляется по значениям RGB с применением гамма-коррекции. Чистый белый (1.0) на чистом чёрном (0.0) даёт максимальное значение 21:1. Этот инструмент выполняет полный расчёт мгновенно.

Текст размером не менее 18pt (24px) обычного начертания или не менее 14pt (около 18.67px) полужирного начертания. Для крупного текста действует более мягкое требование к контрасту (3:1 для AA), поскольку крупные символы легче читать при низком контрасте. Шрифт 16px полужирного начертания квалифицируется как крупный текст.

Если выбранные цвета не соответствуют требованиям к контрасту, инструмент автоматически предлагает альтернативные цвета переднего плана или фона, которые сохраняют похожий оттенок, но корректируют светлоту для соответствия уровню WCAG AA. Нажмите на любое предложение, чтобы применить его мгновенно — не нужно вручную подбирать значения светлоты HSL.

Диапазон от 1:1 (нет контраста — одинаковые цвета) до 21:1 (максимум — чистый чёрный на чистом белом). Коэффициент 4.5:1 означает, что более светлый цвет в 4.5 раза ярче тёмного. Типичные примеры: чёрный на белом = 21:1, тёмно-серый на белом = 7-15:1, средне-серый на белом = 3-5:1 (пограничный), светло-серый на белом = часто ниже 3:1 (не пройдено).

Инструмент использует сплошные цвета HEX — это правильный подход для тестирования соответствия WCAG. WCAG требует проверки итогового отрисованного цвета в том виде, в каком его воспринимает пользователь. Если вы используете прозрачность rgba, тестируйте фактически смешанный цвет (как текст выглядит на реальном фоне), а не прозрачный код цвета.

Нет. Все вычисления выполняются локально в вашем браузере через JavaScript. Никакие значения цветов не передаются ни на какой сервер.

Что такое проверка контрастности цветов?

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

Почему контрастность важна

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

Как использовать

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

Советы для дизайнеров

Проверяйте цветовую палитру на ранних этапах дизайна, а не после создания сайта. Тёмный текст на светлом фоне обычно работает хорошо. Не полагайтесь только на цвет для передачи информации. Помните, что крупный текст (18px+ обычный или 14px+ жирный) имеет менее строгие требования к контрастности.

Конфиденциальность

Всё работает в вашем браузере. Данные о цветах не отправляются на сервер. Без регистрации, без отслеживания.

Безопасность и конфиденциальность

Безопасность ваших данных — наш приоритет

Локальная обработка

Вся обработка происходит в вашем браузере

Без передачи данных

Ваши данные не отправляются на наши серверы

Без хранения данных

Данные не хранятся и не передаются

SSL-шифрование

SSL-шифрование для безопасного соединения

Next Step

Пипетка цвета

Выбирайте цвета и получайте коды HEX, RGB, HSL

Конвертер HEX в RGB

Конвертируйте цвета между форматами HEX, RGB и HSL

Был ли этот инструмент полезен?

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