- Статьи
- 2 мин на чтение
- 17
Почему разноцветные сектора непригодны для использования в диаграммах
Дизайн с учётом потребностей людей с нарушением цветового зрения
Во многих интерфейсах дизайнеры применяют диаграммы, чтобы помочь пользователям наглядно увидеть данные. К сожалению, большинство этих диаграмм недоступны для людей с нарушением цветового зрения. Такие люди не могут отличить сектора с данными друг от друга, если вы используете в диаграмме несколько цветов.
Ниже вы видите столбчатую диаграмму с разноцветными столбцами. Пользователям с нарушением цветовых ощущений в красно-зелёной области спектра (дейтеранопия или протанопия) будет трудно отличить три цветных сектора из четырёх, поскольку цвета будут слишком похожими.
Чтобы сделать диаграммы доступными для людей с нарушением цветового зрения, не используйте разные цвета. Вместо этого возьмите один цвет и меняйте его насыщенность и яркость. Таким образом, вы создадите различные оттенки для одного и того же цвета, но при этом сохраните контраст. В результате люди с нарушением цветового зрения смогут отличать сектора друг от друга так же легко, как и пользователи с нормальным зрением.
Изменение яркости (воспринимаемая яркость цвета) всегда будет заметно независимо от нарушения цветового зрения. Чтобы проверить это, вы можете изменить базовый цвет с синего на красный, но оставить при этом те же значения насыщенности и яркости. Как видно, люди с нарушением цветового зрения могут не воспринимать красный цвет, но они всё равно смогут увидеть разные уровни контраста, которые получились в результате применения различных значений яркости.
Сектора на разноцветной диаграмме выглядят запутанно и для пользователей с нарушением цветовых ощущений в сине-фиолетовой области спектра (тританопия). Два цветных сектора с данными из четырёх конфликтуют, потому что они оба розовые. Другие два также конфликтуют, потому что они оба синие.
Диаграмма с разными тонами больше доступна для пользователей с нарушением цветовых ощущений в сине-фиолетовой области спектра, потому что они могут различать каждый из секторов с данными. Хотя синий цвет менее насыщенный, пользователи по-прежнему видят контрастность цветов.
Сектора с применением разных тонов полезны не только для столбчатых диаграмм, но и в случае круговых диаграмм. Чем больше секторов с данными представлено на диаграмме, тем больше необходимость в использовании разных тонов. Вы можете выбрать цвет для восьми наборов данных и экспериментировать с его значениями насыщенности и яркости. Однако, если на диаграмме представлено больше значений, может потребоваться ещё один цвет.
Не используйте разноцветные сектора в диаграммах. Сектора с разными тонами намного более доступны для людей с нарушением цветового зрения. Ваши диаграммы принесут наибольшую пользу людям, если каждый из них сможет детально изучить данные.
Перевод статьи Why Multi-Color Marks Are Inaccessible on Charts из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
