Цветовой контраст: 5 ошибок, из-за которых кнопки и текст становятся невидимыми
Контраст — это не «красиво/некрасиво», а читаемо/нечитаемо. Если текст сливается с фоном, пользователь теряет смысл, даже если интерфейс выглядит аккуратно.
Типовые провалы:
• светло-серый текст на белом фоне в подсказках и плейсхолдерах;
• кнопка с низким контрастом: надпись есть, но действие не считывается;
• цвет как единственный маркер состояния: ошибка только красным, успех только зелёным;
• текст поверх фото, градиента или пёстрого баннера без подложки.
Проверяйте не только основной текст, но и иконки, ссылки, рамки полей, disabled-состояния и фокус. Особенно часто ломаются второстепенные элементы: они кажутся «декоративными», хотя именно ими пользуются с клавиатуры и на слабом экране. Если элемент важен для действия — у него должен быть уверенный визуальный вес.
Хорошее правило: сначала делайте интерфейс читаемым в монохроме, а уже потом добавляйте цвет. Если смысл исчезает без оттенков, значит контраст и семантика завязаны слишком сильно.
Доступность веб-интерфейсов
@accessibility_in_design_ww
Цветовой контраст: 5 ошибок, из-за которых кнопки и текст становятся невидимыми
Этот пост опубликован в Telegram-канале Доступность веб-интерфейсов. Подписаться можно по ссылке: @accessibility_in_design_ww.