Серый текст на сайте плохо читается: как проверить контраст с учётом прозрачности

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

Контраст — отношение, а не название цвета

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

Для минимального уровня AA обычному тексту обычно требуется отношение не менее 4,5:1, для крупного — 3:1 в условиях критерия. Категория крупного определяется размерами и начертанием по стандарту, а не субъективным ощущением дизайнера. У критерия есть область применения и исключения; один результат калькулятора не является полной проверкой доступности страницы.

Прозрачность меняет результирующий цвет

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

В настоящем CSS прозрачность может применяться к целому блоку, а позади лежать несколько поверхностей. Градиент, картинка и режимы смешивания требуют отдельного анализа. Калькулятор не знает дерево элементов и не снимает цвета с вашего экрана, поэтому его вывод относится только к введённой простой паре.

Округление не должно превращать провал в успех

Отношение чуть меньше 4,5 нельзя округлить до 4,5 и объявить проходным. Сравнение выполняют по неокруглённому результату, а отображение служит для чтения. Это особенно заметно на серых оттенках рядом с порогом.

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

Меняйте причину, а не маскируйте её

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

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

Практический прогон после исправления

1. Снять реальные значения цвета текста, фона и прозрачности из нужного состояния.
2. Проверить простую пару калькулятором, сохранив исходные значения.
3. Открыть страницу на небольшом экране и увеличить размер текста.
4. Пройти кнопки и поля клавиатурой, проверить ошибки и выбранные состояния.
5. Повторить на альтернативной теме, если она поддерживается.

В инструменте принимаются цвета #RRGGBB и непрозрачность текста в процентах. Он показывает рассчитанный эффективный цвет и отношение, а также сравнение с двумя указанными порогами. Размер шрифта не определяется автоматически: отметка для крупного текста применима только при выполнении соответствующего определения.

Такая запись проверки полезнее комментария «стало темнее». Команда видит, какой элемент и в каком состоянии изменён, какие значения использовались и что ещё осталось проверить. Результат помогает сделать содержание доступнее, но не является юридическим заключением или сертификатом соответствия всего сайта.