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