Цветовой контраст ломает интерфейс чаще, чем кажется: 5 ошибок, которые прячут контент
Если текст, иконка или граница читаются только «на глазок», пользователь срывается с задачи. Для доступности важен не вкус, а различимость: светлый текст на светлом фоне, серые подписи на серой карточке, бледные ссылки без подчёркивания — всё это ухудшает чтение.
Проверьте базу:
— основной текст и фон;
— ссылки и обычный текст;
— иконки, особенно в кнопках и тултипах;
— состояния hover, focus, disabled;
— графики, легенды и ошибки в формах.
Частая ловушка — полагаться только на цвет. Если ошибка отмечена красным, добавьте текст, иконку или подсказку. Если активный пункт меню выделен цветом, усилите его формой, толщиной, подложкой или рамкой. Один цвет почти всегда проигрывает в реальном интерфейсе.
Ещё одна проблема — прозрачности, градиенты и изображения под текстом. На макете это выглядит «воздушно», а на экране превращается в шум. Самый надёжный тест: убрать оформление до простых плоскостей и посмотреть, осталась ли читаемость.
Проверяйте контраст не по ощущениям, а по задаче: пользователь должен сразу понять, куда нажать и что произошло. Եթե элемент теряется, это не стиль, а баг.
Доступность веб-интерфейсов
@accessibility_in_design_ww
Цветовой контраст ломает интерфейс чаще, чем кажется: 5 ошибок, которые прячут контент
Этот пост опубликован в Telegram-канале Доступность веб-интерфейсов. Подписаться можно по ссылке: @accessibility_in_design_ww.