Привет, я Антон, UX-дизайнер.
Я работаю над библиотекой компонентов eLama. Расскажу, как мы обнаружили один из недостатков библиотеки и как его исправили.
Когда мы начали работать над компонентами, мы изначально мало внимания уделяли контрасту.
Мы это быстро поняли благодаря отзывам недовольных пользователей.
Один пользователь заполнил форму, но не смог ее отправить: кнопка отправки была заблокирована, хотя все поля выглядели заполненными.
Фактически одно поле было пустым, информация из плейсхолдера просто совпадала с реальными данными, а сам плейсхолдер был достаточно ярким и контрастным.
Мы не учли, что цветопередача мониторов, условия работы и визуальные характеристики пользователей сильно различаются, поэтому один не может отличить заполнитель от заполненного поля, а другой не может различить текст заблокированной кнопки.
При попытке увидеть текст на заблокированной кнопке
Немного теории
Контрастность — это отношение яркости элемента к яркости фона.Контрастность измеряется в диапазоне от 1:1 до 21:1, где 1:1 — минимальное значение, например, белый текст на белом фоне, а 21:1 — максимальное (черный текст на белом фоне).
В Руководстве по доступности веб-контента ( ВКАГ ) очень подробно описаны требования к контрасту.
Существует 2 уровня доступности:
- АА – для людей со зрением чуть хуже среднего (острота 0,5 или 20/40)
- ААА – для людей со слабым зрением (острота 0,25 или 20/80)
А как насчет контраста с другими компаниями?
Текст на цветных блоках в компонентах Газпрома преимущественно имеет очень низкую контрастность:
Похожая ситуация и у Semrush и ВКонтакте:
Можно ли назвать эти интерфейсы плохими только из-за низкой контрастности? Едва ли.
Достаточный уровень контрастности — важный, но не единственный критерий оценки интерфейса.
Главное — соблюдать требования к контрастности там, где она напрямую влияет на решение задачи пользователя — например, в тех же кнопках и плейсхолдерах.
Как мы улучшили контрастность в eLama
Мы измерили контраст в Figma, используя Плагин контрастности :
Сначала мы проверили компоненты с цветным фоном: кнопки, метки и значки.
Оказалось, что только синяя кнопка имеет приемлемый уровень контрастности: 
Контрастность этикеток и значков оказалась низкой.
Вот что произошло, когда мы увеличили контрастность надписей хотя бы до 4,5:1 : 
Цвета основного и дополнительного текста стали темнее.
Для основного текста установлен минимальный порог контрастности.
13:1 .
Дополнительный текст нового цвета увеличил контрастность на белом фоне.
4,25:1 .
Это менее чем приемлемо 4,5:1 .
Но мы намеренно не стали увеличивать контраст, чтобы основной текст отличался от дополнительного: 
Также мы решили, что контраст дополнительного текста на сером фоне должен быть минимальным.
3,5:1. Он снова меньше 4,5:1 , и мы снова сознательно пришли к меньшему значению.
Разница между вариантами с контрастностью 3,77:1 и 4,5:1 оказалась незначительной, поэтому мы решили не разбивать дополнительный цветовой жетон на два — для белого фона и для серого.
А вот для заполнителя в поле мы, наоборот, уменьшили контрастность, чтобы текст выглядел как всплывающая подсказка, а не как реальные данные, добавленные с помощью автозаполнения.
В то же время мы постарались сделать его читабельным: 
Неактивные компоненты были самым слабым местом нашей дизайн-системы с точки зрения контрастности.
В рекомендациях WCAG говорится, что контраст мелкого текста должен быть как минимум 4,5:1 , за исключением текста в неактивных элементах.
И мы не нашли однозначного ответа, какой контраст должен быть в таких элементах.
Мы решили, что контраст должен быть от 2,5:1 до 3,5:1 в зависимости от фона текста — например, серый для обычной кнопки или белый для переключателя.
Мы решили ограничить контрастность независимого значка — значков в поле или значков кнопок — диапазоном от 1,5:1 до 2:1 чтобы они не выглядели кликабельными: 
Главный вывод
Достаточный уровень контрастности делает интерфейс более удобным и помогает пользователю решать задачи.Так что смело жертвуйте эстетикой и меняйте контрастность, если это поможет пользователям решить их проблемы.
Теги: #интерфейсы #веб-дизайн #система дизайна #библиотека компонентов #контраст
-
Беспроводное Аудио От Creative, Часть 1
19 Oct, 24 -
Новые Тарифы От Укртелекома На Adsl
19 Oct, 24
