Доступность веб-интерфейсов

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

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

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

Проверьте типовые зоны риска:
— основной текст и второстепенные подписи не должны сливаться;
— состояние disabled не должно выглядеть как «невидимое»;
— ссылки, иконки и кнопки обязаны отличаться не только цветом, но и формой/подчёркиванием/обводкой;
— текст на фоне изображения требует подложки или затемнения;
— ошибки и подсказки не должны теряться среди остального UI.

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

Хорошее правило простое: если смысл элемента считывается только по цвету, интерфейс уже хрупкий. Добавляйте текст, иконку, подчеркивание, рамку или фон-метку — и проверяйте контраст на реальном макете, а не только в палитре.
Этот пост опубликован в Telegram-канале Доступность веб-интерфейсов. Подписаться можно по ссылке: @accessibility_in_design_ww.
tech

Свежие посты в категории «Tech Infrastructure»

Все каналы категории →

start

Готовы запустить рекламу через сеть public.tg?

Новый оффер, продукт, GEO, кейс, событие или партнёрский запуск — соберём маршрут под задачу и отдадим медиаплан.

Telegram для медиаплана: @AFFtop_connect. Быстрый тест: $20 за канал, $1000 за пакет по сети.