<b>Контраст текста и фона: 5 ошибок, из-за которых интерфейс становится нечитаемым</b>

<b>Контраст текста и фона: 5 ошибок, из-за которых интерфейс становится нечитаемым</b>

Контраст — это не про «красиво», а про то, сможет ли человек быстро прочитать текст, увидеть кнопку и не промахнуться мимо статуса. Если элементы сливаются, страдает не только доступность, но и конверсия: пользователь просто не понимает, куда смотреть.

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

Проверяйте не только основной текст, но и hover, focus, disabled, placeholder и иконки с подписью. Контраст должен работать в реальном интерфейсе: на мобильном, при ярком солнце, при слабом зрении, при плохом мониторе. Если сообщение важно, не оставляйте его в «сером для красоты» — сделайте его читаемым с первого взгляда.

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