Восприятие цвета в интерфейсе: почему мы видим цвет по-разному
Недавно, работая над одним из своих продуктов, я обнаружил, что вижу цвет не так, как остальные: правый глаз видит насыщенные цвета, левый — тусклые, а сочетание обоих глаз даёт средний по насыщенности цвет.
Не судите строго, это первый опыт написания подобных текстов. Если есть предложения, чем можно дополнить материал, пишите в комментарии или мне лично 😌
От того, как мы видим и чувствуем цвет, зависит многое. Вне сомнений, хорошо продуманный, удобный и приятный глазу интерфейс будет отлично справляться с поставленной задачей. Так, сравнивая 2 сайта со схожим контентом, пользователи наверняка выберут тот, где им «комфортней». Но в некоторых случаях 2 человека воспринимают один и тот же интерфейс или коммуникацию совершенно по-разному.
Чтобы понимать всю проблематику, нужно иметь представление о том, что такое цвет и как он воспринимается человеческим глазом.
Цвет — это не свойство объекта, а особенности его восприятия. Например, в дневное время или при искусственном освещении, все окружающие предметы имеют насыщенный цвет, но по мере снижения уровня освещенности — контрастность цвета уменьшается, пока все предметы не станут серыми (например, глубокой ночью при полном отсутствии света).
Так происходит в силу ряда причин. Одна из них — особенности строения и работы человеческого глаза. Сетчатка глаза включает в себя специальные рецепторы — колбочки и палочки, их в среднем 7 миллионов и 130 миллионов соответственно у каждого человека.
Колбочки отвечают за цветовосприятие, а палочки — за сумеречное и периферическое зрение. Палочки — рецепторы сумеречного зрения работают всегда, независимо от внешних условий: они обеспечивают общую видимость (очертания, размеры объектов). Колбочки активно работают только в условиях освещенности, по мере затемнения интенсивность их работы снижается и предметы становятся серыми.
К физическим свойствам глаза стоит добавить психоэмоциональное состояния человека и полученный ранее опыт. Важно не только, что человек чувствует «здесь и сейчас», но и широкий спектр пережитых ранее эмоций.
Получается, что разница в восприятии одного и того же цвета может быть вызвана несколькими причинами:
- Неодинаковое количество колбочек в сетчатке глаза. Чем больше колбочек у человека — тем больше оттенков он различает и наоборот. Также возможны нарушения в работе колбочек, вследствие чего у человека развивается разного рода дефекты и нарушения цветового зрения.
- Разница в уровне освещения. Визуальные элементы интерфейса — это, по сути, пиксели, состоящие из трёх основных цветов: красного, синего и зеленого. При изменении интенсивности и сочетания данных цветов меняется их восприятие, но они выглядят одинаково только в абсолютно идентичных условиях, например, при полном отсутствии освещения. Если добавить свет — он смешается с тем, который излучает каждый элемент изображения, что поменяет восприятие.
- Психологические особенности человека. Многое зависит от мозга. Например, мы знаем, что лимон всегда желтый и, если мы увидим его ночью, фактически — он будет серым, но мозг с большой долей вероятностью воспримет его, как желтый.
Контекст и психологические особенности пользователя влияют на то, как пользователь видит интерфейс. Но тут я предлагаю подробнее разобраться с индивидуальными особенностями зрения и их расстройствами.
Расстройства цветового зрения бывают врождёнными и приобретёнными. Приобретённые наблюдаются при различных заболеваниях сетчатки и зрительного нерва, особенно их атрофиях; чувствительность при этом снижается ко всем трём основным цветам: красному, зелёному и синему.
Ослаблением цветового зрения на отдельные цвета, это как раз когда нарушена работа колбочек, называют:
- Протанопией — когда пользователь не может воспринимать красный свет;
- Дейтеранопией — пользователь не может воспринимать зеленый свет;
- Тританопией — пользователь не может воспринимать синий свет;
- Монохромазией — отсутствие цветового зрения; при этом сохраняется лишь черно-белое восприятие.
В настоящее время нет лечения от цветовой слепоты или нарушения цветовосприятия. Однако мы можем делать интерфейсы доступнее, проверяя их перед публикацией на соответствие всем стандартам. Например, WCAG.
WCAG (Web Content Accessibility Guidelines) — это международный стандарт, содержащий общие рекомендации по обеспечению доступности интернета для всех пользователей, в том числе для людей с ограниченными возможностями. Стандарт WCAG используется во всем мире, его применение минимизирует разницу в восприятии элементов интерфейса разными пользователями. В отношении нетекстовых элементов WCAG предлагает такие рекомендации:
- Контрастность компонентов интерфейса и графических объектов должна составлять не менее 3:1 по отношению к окружающим цветам.
- Исключения допускаются для изображений, не являющихся важным элементом понимания контента (второстепенные элементы).
У людей с расстройством цветового зрения нарушено восприятия одного или нескольких основных цветов, из-за чего они не различают оттенки и неадаптированный интерфейс сливается в общую, труднопонимаемую массу. Для решения этой проблемы есть несколько способов:
- Высокая контрастность элементов (достаточно контрастности, указанной в стандарте WCAG). Для проверки уровня контрастности можно воспользоваться Adobe Photoshop и наложить на готовый макет корректирующий слой или фильтр Black & White.
- Выделить важные элементы подписями и дополнительными графическими элементами. Недостаток этого способа — потенциальная перегруженность интерфейса, что будет тяжело восприниматься людьми без дальтонизма.
- Создание отдельной темы для дальтоников. Трудоемкий, но самый эффективный способ решения проблемы.
Так же существуют удобные инструменты, которые помогут адаптировать интерфейс, например:
Stark, для разных платформ и программ, например: плагин Figma, расширение для Google Chorome. Представляет из себя набор инструментов, которые помогут при разработке интерфейса продукта.
Альтернатива Stark — бесплатный на данный момент плагин для Figma, Adee Comprehensive Accessibility Tool. Может немного глючить, но в целом хорошо справляется со своей задачей.
Funkify — расширение для Google Chrome, которое поможет вам увидеть интерфейсы глазами пользователей с различными нарушениями зрения. Если интересно, то на их сайте есть несколько интересных симуляторов. Например, симулятор нарушения когнитивных функций поможет увидеть, как видят интернет люди с аутизмом.
Восприятие цвета, как оказывается, штука индивидуальная. Мы воспринимаем цвет в интерфейсе по-разному в силу наших физиологических, психоэмоциональных особенностей, окружающего освещения или в зависимости от качества монитора. Благодаря этим знаниям и используя простые инструменты можно делать интерфейсы доступнее для значительной части людей.
Если тема инклюзивности в интерфейсах вам близка, вот некоторые интересные материалы:
Вот кстати тоже наблюдаю у себя:
левый глаз показывает изображение в синих тонах, правый в красных...
Замечал такое, когда глаза были в разных условиях освещенности, например в один глаз сильнее светила лампа.
А у меня все нормально с глазами, и слава богу)
Комментарий недоступен
Бесит что про это никто не исследует особо. Ну есть и есть такое расстройство ) В какие бы клиники не ходил везде одно и тоже. Хотя понимаю что там у всех степени разные