Контраст — не про красоту: как не потерять пользователей на первом экране

Контраст — не про красоту: как не потерять пользователей на первом экране

Цветовой контраст ломается не только на сером тексте. Чаще проблема в «почти видимых» элементах: плейсхолдерах, подписях к полям, иконках без текста, ссылках внутри абзаца.

Минимальная проверка перед релизом:
— обычный текст читается на фоне без напряжения;
— ссылка отличается не только цветом, но и подчёркиванием;
— фокус клавиатуры заметен на любом фоне;
— ошибка в поле видна не только красной рамкой.

Не проверяйте контраст «на глаз». Дизайнер смотрит на макет в хорошем мониторе, пользователь — с бликами, тёмной темой, увеличением, уставшими глазами. Используйте пипетку и контраст-чекер для реальных цветов из интерфейса, а не только из дизайн-системы.

Отдельно проверьте состояния: hover, focus, active, disabled, selected. Частая ошибка — обычная кнопка читается, а выбранный фильтр почти сливается с фоном.

Хороший контраст делает интерфейс предсказуемым: текст читается, действие видно, ошибка не прячется. Начните с самых частых экранов и проверьте элементы, где пользователь принимает решение.