Contrast Checker: Инструмент для WCAG-контраста

Что такое Contrast Checker?

Contrast Checker вычисляет коэффициент контрастности на основе яркости между цветом переднего плана и цветом фона, чтобы определить, соответствует ли комбинация стандартам доступности WCAG 2.1. Инструмент проверяет все четыре пороговых значения соответствия: AA и AAA для обычного текста, а также AA и AAA для крупного текста. Он отображает предварительный просмотр текста в реальном времени, чтобы вы могли видеть именно то, что увидят читатели. Аудиторы доступности, UI-дизайнеры и фронтенд-разработчики используют его перед выпуском любой новой цветовой комбинации, чтобы избежать ошибок контраста в производственной среде. Всё работает в браузере — без серверных запросов, без входа в систему.

Основные возможности

• Расчёт коэффициента контрастности WCAG 2.1 — Использует стандартную формулу относительной яркости (с порогом линеаризации 0,03928 и формулой соотношения (L1 + 0,05) / (L2 + 0,05)) для получения результатов, совместимых с официальными инструментами WCAG.
• Проверка соответствия AA и AAA — Четыре значка соответствия обновляются в реальном времени: Обычный AA (≥ 4,5:1), Обычный AAA (≥ 7:1), Крупный AA (≥ 3:1) и Крупный AAA (≥ 4,5:1). Зелёный значок с галочкой означает прохождение; красный значок с X означает несоответствие.
• Пороговые значения для обычного и крупного текста — Инструмент применяет отдельные пороговые значения для обычного и крупного текста (определяемого как 18pt или 14pt жирным), в соответствии с критерием успеха WCAG 2.1 1.4.3.
• Предварительный просмотр в реальном времени с образцом текста — Карточка предпросмотра отображает заголовок, основной абзац, мелкий текст и кнопку в выбранных цветах, чтобы вы могли оценить читаемость с первого взгляда.
• Копирование коэффициента контрастности в буфер обмена — Нажмите на значок копирования рядом с отображением соотношения, чтобы записать строку соотношения (например, 4,53:1) в буфер обмена и внести проверку в историю.
• Работает в автономном режиме после загрузки — Все расчёты соотношений реализованы в JavaScript без внешних вызовов API.

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

Шаг 1: Установка цвета переднего плана

Перейдите на страницу Contrast Checker. Инструмент открывается с чёрным (#000000) в качестве переднего плана и белым (#FFFFFF) в качестве фона — соотношение 21:1, которое проходит все четыре уровня WCAG.

Установите цвет переднего плана (текста) одним из способов:

• Нажав на образец цвета (цветной квадрат), чтобы открыть встроенный палитрный инструмент браузера
• Введя шестнадцатеричный код непосредственно в текстовое поле рядом с образцом (например, #1E293B)

Образец и текстовое поле остаются синхронизированными. Образец предварительного просмотра под полями ввода показывает цвет с автоматически контрастирующим текстом метки.

Шаг 2: Установка цвета фона

Используйте те же элементы управления на правой стороне карточки ввода цвета, чтобы установить цвет фона. Инструмент использует трёхколоночный макет: передний план слева, кнопка замены в центре и фон справа.

Шаг 3: Считывание коэффициента контрастности и значков соответствия

Карточка Коэффициент контрастности появляется под полями ввода и показывает:

• Рассчитанное соотношение крупным пиксельным шрифтом (например, 7,23:1)
• Значок копирования для копирования строки соотношения
• Четыре значка соответствия: Обычный AA (≥ 4,5:1), Обычный AAA (≥ 7:1), Крупный AA (≥ 3:1), Крупный AAA (≥ 4,5:1)

Зелёный значок со значком галочки указывает, что комбинация соответствует данному уровню. Красный значок с X указывает на несоответствие. Стремитесь к минимум Обычный AA для всего основного текста.

Шаг 4: Проверка предварительного просмотра в реальном времени

Прокрутите до карточки Предварительный просмотр. Она отображает четыре элемента в выбранных цветах:

• Крупный заголовок (text-2xl)
• Основной текст (text-base)
• Мелкий текст (text-sm)
• Кнопку с переставленными цветами (передний план становится фоном и наоборот)

Этот предварительный просмотр позволяет оценить, выглядят ли цвета читаемыми, прежде чем писать какой-либо код.

Шаг 5: Замена цветов или использование предложений по доступным палитрам

Нажмите кнопку замены (значок двойной стрелки) между двумя полями ввода цвета, чтобы мгновенно поменять местами передний план и фон. Это удобно для тестирования вариантов светлый-на-тёмном и тёмный-на-светлом.

Прокрутите до панели Доступные пары цветов в нижней части страницы. Она показывает 20 цветовых комбинаций с их коэффициентами контрастности. Нажмите на любую пару, чтобы загрузить эти два цвета в инструмент. Большинство пар проходят AA (4,5:1), что обозначается галочкой. Некоторые пары проходят только Крупный AA (3:1) и помечены X — они подходят для заголовков и крупных элементов UI, но не для обычного основного текста.

Практические примеры

Проверка метки кнопки на фоне

В вашем дизайне используется белый текст #FFFFFF на синей кнопке #3B82F6. Введите #FFFFFF как передний план и #3B82F6 как фон. Инструмент рассчитает примерно 3,7:1. Значок Обычный AA не проходит (требуется 4,5:1), но Крупный AA проходит. Нужно сделать синий темнее — попробуйте #1D4ED8, что даёт примерно 6,7:1 и проходит Обычный AA.

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

Ваш дизайн тёмного режима использует текст #94A3B8 (slate-400) на фоне #0F172A (slate-900). Введите эти значения. Соотношение составит около 6,96:1, проходя Обычный AA, Крупный AA и Крупный AAA. Оно немного не дотягивает до Обычного AAA (требуется 7:1). Вы можете уверенно использовать эту комбинацию для основного текста на уровне AA.

Тестирование фирменного цвета как цвета текста

Ваш фирменный оранжевый — #F97316. Вы хотите использовать его как цвет ссылки на белом фоне #FFFFFF. Соотношение составляет примерно 2,8:1 — Обычный AA не проходит. Предварительный просмотр подтверждает, что текст выглядит читаемым для некоторых пользователей, но не пройдёт аудит доступности. Переключитесь на более тёмный оттенок, например #C2410C (≈ 5,2:1), чтобы пройти AA.

Советы и лучшие практики

Тестируйте как передний план на фоне, так и фон на переднем плане. Кнопка замены позволяет поменять роли одним нажатием. Некоторые паттерны UI (кнопки, выделенные выборки) используют цвет переднего плана как фон малой площади.

Панель «Доступные пары цветов» показывает соотношения с одним десятичным знаком. Эти реально вычисленные соотношения отображаются на каждой карточке с предустановленным образцом. Нажмите на любой образец, чтобы загрузить оба цвета — используйте это как отправную точку, когда вам быстро нужна рабочая палитра.

Пороговые значения для крупного текста применяются при 18pt (24px) или 14pt жирным (примерно 18,67px жирным). Инструмент отображает результаты Крупный AA и Крупный AAA, чтобы напомнить вам, что для заголовков действуют более мягкие пороги. Комбинация, не проходящая Обычный AA, может оставаться допустимой для использования исключительно в крупных заголовках.

Делитесь результатами через URL. Текущие цвета переднего плана и фона закодированы в URL страницы. Скопируйте URL из адресной строки после ввода цветов, чтобы отправить конкретную проверку контрастности коллеге или включить в документ обзора дизайна.

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

Распространённые проблемы и устранение неполадок

Соотношение показывает 1:1 независимо от ввода. Обычно это означает, что в обоих полях цвета одно и то же значение. Убедитесь, что вы ввели разные цвета в переднем плане и фоне. Если вы только что вставили одинаковый шестнадцатеричный код в оба поля, одно из них нужно изменить.

Значок соответствия говорит о несоответствии, но я думал, что мои цвета правильные. Формула WCAG строже, чем может показаться визуально. Комбинация чёрного на тёмно-сером, например текст #333333 на фоне #555555, даёт лишь около 1,7:1, значительно ниже AA. Используйте результат инструмента, а не визуальное суждение.

Восстановление истории не перезагружает мои цвета. Функция восстановления истории анализирует записи в формате FG: #XXXXXX / BG: #XXXXXX. Записи, созданные вне этого инструмента (или с повреждёнными данными), могут быть некорректно проанализированы. В таких случаях введите цвета повторно вручную.

Кнопка «Копировать соотношение» не реагирует. API буфера обмена требует HTTPS или localhost. При обычном HTTP запись в буфер обмена завершается неудачей. В этом случае инструмент показывает уведомление об ошибке. Щёлкните правой кнопкой мыши на тексте с отображаемым соотношением и используйте встроенную функцию копирования браузера в качестве запасного варианта.

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

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

Contrast Checker выполняет все вычисления локально в вашем браузере. Формула относительной яркости и расчёт коэффициента контрастности работают в JavaScript на вашем устройстве. Никакие значения цветов не отправляются на какой-либо сервер. Инструмент не требует учётной записи, не устанавливает куки отслеживания и не регистрирует, какие цветовые комбинации вы тестируете. После загрузки страницы он работает полностью в автономном режиме, что делает его безопасным для оценки цветов в конфиденциальных дизайн-системах или непубличных фирменных руководствах.

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

Является ли Contrast Checker бесплатным?

Да. Полная функциональность проверки контрастности WCAG — включая четыре значка соответствия, предварительный просмотр в реальном времени, кнопку замены и панель с доступными цветами — полностью бесплатна без необходимости создавать учётную запись. Функции для сторонников, такие как предустановки, отслеживание истории и заметки к инструменту, доступны по подписке Ko-fi.

Работает ли Contrast Checker в автономном режиме?

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

Безопасны ли мои данные в Contrast Checker?

Да. Никакие данные о цветах не передаются на какой-либо сервер. Инструмент не выполняет сетевых запросов во время проверки контрастности. Цвета переднего плана и фона существуют только в памяти браузера и, если вы используете функцию совместного использования, закодированы в URL, который вы выбираете для копирования.

Какую версию WCAG использует этот инструмент?

Инструмент реализует критерий успеха WCAG 2.1 1.4.3 (Контрастность — Минимум) и 1.4.6 (Контрастность — Расширенный). Уровень AA требует соотношения не менее 4,5:1 для обычного текста и 3:1 для крупного текста. Уровень AAA требует 7:1 для обычного текста и 4,5:1 для крупного текста. Эти пороговые значения совпадают со значениями, указанными в значках соответствия (Обычный AA ≥ 4,5:1, Обычный AAA ≥ 7:1, Крупный AA ≥ 3:1, Крупный AAA ≥ 4,5:1).

Что считается «крупным текстом» по WCAG?

WCAG определяет крупный текст как текст размером не менее 18 пунктов (примерно 24px) обычного начертания или не менее 14 пунктов (примерно 18,67px) жирного начертания. Инструмент помечает третий и четвёртый значки соответствия как «Крупный AA» и «Крупный AAA». Предварительный просмотр отображает заголовок в text-2xl, который обычно относится к диапазону крупного текста.

Как рассчитывается коэффициент контрастности?

Инструмент конвертирует каждый шестнадцатеричный цвет в относительную яркость, используя формулу WCAG: каждый канал RGB линеаризуется (делится на 255, затем применяется гамма-коррекция sRGB: s / 12,92, если s <= 0,03928, иначе ((s + 0,055) / 1,055) ^ 2,4). Яркость затем вычисляется как 0,2126 R + 0,7152 G + 0,0722 * B. Коэффициент контрастности равен (L_более_светлый + 0,05) / (L_более_тёмный + 0,05).

Могу ли я тестировать цвета в форматах, отличных от шестнадцатеричных кодов?

Поля ввода цвета принимают шестнадцатеричные коды, введённые в виде текста (с # или без). Вы также можете использовать встроенный образец выбора цвета. Если у вас есть значение RGB или HSL, воспользуйтесь Color Picker, чтобы сначала конвертировать его в шестнадцатеричный формат, а затем вставьте его здесь.

Каково максимально возможное соотношение контрастности?

Максимальное соотношение контрастности составляет 21:1, что является соотношением между чистым чёрным (#000000) и чистым белым (#FFFFFF). Инструмент открывается с этими двумя цветами по умолчанию, демонстрируя максимально достижимое соотношение.

Можно ли использовать его для элементов UI, помимо текста?

WCAG 2.1 также охватывает нетекстовый контраст в критерии успеха 1.4.11, который требует соотношения 3:1 для компонентов UI и графических объектов. Значок Крупный AA инструмента (≥ 3:1) соответствует этому порогу и может использоваться для оценки цветов иконок, индикаторов фокуса и рамок элементов управления форм, даже если предварительный просмотр отображает текст.

Как поделиться проверкой контрастности с командой?

После ввода цветов переднего плана и фона URL страницы кодирует оба значения. Скопируйте URL из адресной строки и поделитесь им напрямую. Получатели, открывшие ссылку, увидят те же цвета, предварительно загруженные с уведомлением «Загружено из общей ссылки». Вы также можете использовать кнопки «Поделиться» в нижней части страницы для публикации в Twitter, LinkedIn или Reddit.

Связанные инструменты

• Color Picker — Получите точные шестнадцатеричные значения с экрана или существующих дизайнов, прежде чем тестировать их здесь.
• Color Converter — Конвертируйте цвет из RGB, HSL или CMYK в шестнадцатеричный формат перед вводом в инструмент проверки контрастности.
• Скоро: Palette Generator — Создайте полную палитру, а затем проверьте каждую комбинацию в Contrast Checker для обеспечения соответствия требованиям доступности.

Попробуйте Contrast Checker прямо сейчас: Glyph Widgets Contrast Checker