Цветовой контраст: 5 ошибок, из-за которых текст читают только зрячие на хорошем экране

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

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

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

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

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