Контрастность на сайте: 5 ошибок, из-за которых текст перестаёт читаться

Контрастность на сайте: 5 ошибок, из-за которых текст перестаёт читаться

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

Проверьте самые частые провалы:
• серый текст на белом или почти белом фоне;
• ссылки, которые отличаются только цветом;
• текст поверх фото, градиента или видео;
• плейсхолдеры вместо нормальной подписи поля;
• состояния hover/focus, которые почти не видны.

Отдельно смотрите на мобильную версию: там контраст часто «плывёт» из-за экрана, яркости и мелкого кегля. Если блок читается только при идеальном освещении, это уже плохой знак. Для обычного текста держите уверенный контраст, а не «достаточно симпатичный».

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

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