Контраст текста и фона: 4 ошибки, из-за которых интерфейс плохо читается

Контраст текста и фона: 4 ошибки, из-за которых интерфейс плохо читается

Первый провал — светло-серый текст на белом фоне. Его часто ставят в плейсхолдерах, подсказках и вторичных подписях: выглядит «чисто», но для части пользователей превращается в угадайку.

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

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

Четвертый — забывать про состояния наведения, фокуса и disabled. На светлом фоне и в полупрозрачных кнопках контраст часто «сыпется», и элемент становится видимым, но неразличимым.

Проверяйте не только красивую картинку, а реальный текст на реальном фоне. Если сомневаетесь — затемните шрифт, упростите фон и не оставляйте смысл только в цвете.