Контраст текста и фона: 5 ошибок, из-за которых интерфейс «плывёт»

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

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

Полезный чек-лист:
— не используйте цвет как единственный носитель смысла;
— избегайте текста поверх пёстрых фото и градиентов без подложки;
— не делайте серый «по умолчанию» для важных пояснений;
— проверяйте hover, focus и error-состояния отдельно;
— тестируйте экран в реальном размере, а не только в макете 🎯

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