Цветовой контраст: где интерфейс ломает читаемость и как это поймать заранее

Цветовой контраст: где интерфейс ломает читаемость и как это поймать заранее

Контраст — это не «красиво/некрасиво», а вопрос: сможет ли человек прочитать текст, заметить кнопку и понять состояние элемента. Если серый текст на светло-сером фоне выглядит «аккуратно», это не значит, что он доступен.

Проверяйте в первую очередь:
— основной текст и подписи;
— ссылки в обычном состоянии и при наведении;
— кнопки с текстом и иконки без подписи;
— ошибки, подсказки и статусы вроде «успешно» или «неактивно».
Особенно часто проваливаются второстепенные элементы: плейсхолдеры, бейджи и disabled-состояния.

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

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

Если элемент можно понять только по цвету, его уже стоит переделать.