Начните с информации, которую нельзя потерять
Посмотрите на цену, ограничения, подписи полей, пояснения кнопок и второстепенные условия. Именно их часто делают слишком светлыми, чтобы не спорили с заголовком. Но меньшая визуальная важность не означает, что текст можно почти не видеть. Иерархию можно строить размером, расположением и интервалами, сохраняя читаемость.
Проверьте также текст поверх фотографии. Контраст меняется вместе с участком изображения и кадрированием на мобильном экране. Надпись, читаемая на тёмной части снимка на ПК, может попасть на светлый участок при узкой ширине. Не оценивайте такой блок только по одному скриншоту. Иногда спокойная подложка решает задачу лучше, чем сильная тень у каждой буквы.
Текстовое пояснение схемы
- Условия. Цена и ограничения
- Форма. Подписи и ошибки
- Фон. Надпись на изображении
Используйте измерение и визуальный просмотр
В WCAG для обычного текста на уровне AA указан минимальный контраст 4,5:1, для крупного — 3:1; определение крупного текста зависит от размера и насыщенности. Эти значения следует проверять инструментом по фактическим цветам, а не определять на глаз. У критерия есть исключения, поэтому не превращайте короткое правило в заявление о полной доступности сайта.
После измерения посмотрите реальный рендер. Слишком тонкое начертание, маленький размер и сложный фон могут мешать чтению даже при формальном прохождении отдельного теста. Не пытайтесь компенсировать плохой текст только увеличением яркости акцента. Проверьте целую строку, межстрочный интервал и соседние элементы, чтобы исправление сохраняло общую иерархию.
Не забудьте состояния интерфейса
Проверьте ссылки, наведение, фокус, выбранную вкладку и сообщения об ошибках. Цвет может меняться после действия, и читаемый исходный вариант становится бледным. При этом цвет не должен быть единственным способом сообщить важное различие: ошибке нужны понятные слова, а выбранному состоянию — дополнительный видимый признак.
Зафиксируйте проблемные сочетания в общей системе стилей и исправьте повторяющиеся элементы последовательно. Локальная замена цвета одной кнопки оставит тот же дефект в других разделах. Повторите проверку на телефоне и при увеличении масштаба. Итог — не просто более яркий сайт, а сохранение всей информации, необходимой для выбора и действия. Проверка контраста является частью доступности, а не её полной сертификацией.
Текстовое пояснение схемы
- До действия. Обычный вид
- При выборе. Наведение и фокус
- После. Ответ и состояние
Что взять в работу
- Проверяйте условия и подписи так же внимательно, как заголовки.
- Сочетайте измерение контраста с просмотром рендера.
- Тестируйте состояния после взаимодействия.
Источники и уточнения
Внешние факты сверены по указанным материалам 20 сентября 2026 года. Примеры и критерии выбора в статье — практические рекомендации, а не обещание результата.
Обсудим вашу задачу?
Пришлите сайт или опишите ситуацию. Начнём с того, какой результат вам нужен.
Telegram
VK