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

Контраст текста и фона помогает оценить читаемость интерфейса. Введите два непрозрачных цвета в HEX. Инструмент переводит каналы sRGB в относительную яркость и вычисляет отношение от 1:1 до 21:1. Отдельно показаны пороги WCAG для обычного и крупного текста. Это удобная ранняя проверка при выборе цветов кнопок, ссылок, подсказок и карточек каталога. Для сложного фона проверьте худший участок изображения, а не средний цвет баннера.

Обычному тексту для уровня AA требуется отношение не ниже 4.5:1, крупному — 3:1. Для AAA требования выше: 7:1 и 4.5:1 соответственно. Эти числа не описывают всё качество интерфейса: размер и начертание шрифта, межстрочный интервал, толщина линий и фактическое окружение тоже влияют на восприятие. Если результат близок к порогу, проверьте макет на реальных устройствах и не полагайтесь на округлённое значение в отчёте как на единственное доказательство доступности.

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

Начните с кнопки «Вставить пример», чтобы увидеть ожидаемый формат ввода. Затем замените демонстрационные значения своими данными в полях «Цвет текста, HEX, Цвет фона, HEX». Нажмите «Получить результат». Если формат неверный, инструмент покажет ошибку на русском языке; исправьте исходные данные и повторите действие.

Готовый результат можно скопировать одной кнопкой или скачать в файл contrast-report.txt. Проверьте итог перед публикацией на рабочем сайте: инструмент видит только переданные ему данные и не знает особенностей вашего проекта. Для больших выгрузок удобно сначала обработать небольшой фрагмент и убедиться, что структура результата подходит дальнейшему процессу.

Белый на чёрном даёт отношение 21:1.

#ffffff
#1b1b1b

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

Проверка не учитывает фоновые изображения, прозрачность, толщину шрифта и реальные размеры в макете.

Технически корректный результат ещё не означает, что он подходит бизнес-логике сайта. Например, URL может быть синтаксически верным, но вести на удалённую страницу; XML может быть хорошо сформированным, но не соответствовать настройкам конкретной площадки. После автоматической проверки откройте итог в целевой системе или браузере и сравните его с ожидаемым поведением.

Если инструмент сообщает об ошибке, начните с названного поля или строки. При обработке файлов проверьте кодировку, переносы строк, кавычки и спецсимволы. Они часто попадают в данные при экспорте из Excel, CMS или интеграции и могут менять смысл результата.

Прозрачность усложняет расчёт: передний цвет смешивается с задним, а этот виджет принимает только готовые непрозрачные HEX-значения. Для текста поверх фотографии измерьте контраст в нескольких точках или добавьте сплошную подложку. Для светлой и тёмной темы проверяйте пары отдельно; цвет, который хорошо работает в одной, может стать слабым в другой. После изменения палитры повторно проверьте состояния hover, disabled и focus, поскольку они часто используют другие оттенки.

Для повторяющихся задач сохраните входной пример и ожидаемый результат как проверочный сценарий. После обновления сайта или формата данных прогоните его снова: небольшое изменение шаблона экспорта иногда меняет поведение без явной ошибки. Если результат используется в производственной системе, проверьте не только синтаксис, но и последствия на нескольких реальных записях. При публикации конфигурации или метатегов сравните исходный HTML и ответ сервера с тем, что вы видите в форме.

При проверке кнопки измеряйте текст относительно фактического фона кнопки, а не общего фона страницы. Для ссылки внутри карточки нужен контраст с карточкой, для подписи поверх фотографии — с самым неблагоприятным участком изображения. Если фон меняется при наведении, проверьте оба состояния. Не ориентируйтесь только на соответствие AA: пользователь может видеть экран при ярком солнце, с увеличенным масштабом или нарушением зрения. Порог помогает обнаружить проблему, а реальный тест интерфейса показывает, удобно ли им пользоваться.

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

Сохраните исходный пример и результат рядом с задачей, чтобы при следующем обновлении можно было повторить проверку. Откройте итоговый файл в целевой системе и сравните не только отсутствие ошибки, но и число обработанных записей, конечные адреса, отображение кириллицы и поведение на мобильном экране, если результат используется в интерфейсе. Для конфигурации сервера сначала примените изменения на тестовом окружении и выполните запрос к реальному URL. Для данных каталога выберите несколько контрольных SKU с разными ценами и остатками. Если расхождение найдено, исправляйте источник данных или шаблон генерации, а не только один скачанный файл. Так следующая автоматическая выгрузка не вернёт проблему.

Поля этого инструмента обрабатываются в вашем браузере. Содержимое не отправляется на сервер Pugofka, а локальный файл читается только после вашего выбора. Для XML определяется кодировка из объявления или BOM; при отсутствии подсказки сначала пробуется UTF-8, затем Windows-1251. Виджет скрыт от записи содержимого в Вебвизоре; в Яндекс Метрику передаются slug инструмента и тип действия — открытие, первое взаимодействие, запуск, получение результата, копирование или скачивание.

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

Используйте результат как рабочий черновик: вставьте его в конфигурацию, страницу или документ и повторно проверьте там, где он будет применяться. Если вы меняете индексируемые страницы, обновите связанные ссылки и карту сайта. Для миграции URL дополнительно запустите сетевую проверку редиректов, чтобы увидеть фактические HTTP-ответы после публикации.

Если задача связана с каталогом, импортом или поддержкой интернет-магазина, команда Pugofka может помочь встроить такую проверку в регулярный обмен данными и исправить источник ошибок. Одноразовая онлайн-утилита полезна для диагностики, а постоянный поток данных обычно требует автоматической проверки на стороне проекта.