Про инклюзивность в интерфейсах и то, как дизайнеру учесть особенности цветового зрения.

Привет! Меня зовут Николай Комиссаров, я руковожу командой дизайна Пульса (pulse.mail.ru) и медиапроектов в VK, а также занимаюсь социальными проектами компании. 

Недавно, работая над одним из своих продуктов, я обнаружил, что вижу цвет не так, как другие люди. Если смотрю только правым глазом — цвета более насыщенные, левым — тусклые, а если обоими глазами — цвет получается средним по насыщенности. 

В этой статье я делюсь базовой информацией об особенностях цветового зрения, а также полезными инструментами и ресурсами, которыми сам пользуюсь. Буду рад, если в комментариях продолжите тему своими знаниями и кейсами! 

Цвет, глаз, мозг: немного теории

От того, как человек видит и чувствует цвет, может зависеть многое: например, его впечатление о продукте, будет ли ему комфортно с ним взаимодействовать. Эта особенность лежит не на поверхности: если интерфейс в целом хорошо продуманный, удобный и приятный глазу, в большинстве случаев он и так будет справляться со своими задачами. И сравнивая два сайта с похожим контентом, пользователи выберут тот, где им комфортнее — благодаря проработанному UI. 

Но если смотреть чуть глубже, то выяснится: есть случаи, когда один и тот же интерфейс два человека воспримут совершенно по-разному. Влиять на это могут как раз особенности цветового зрения.

Чтобы понимать всю проблематику, нужно иметь представление о том, что такое цвет и как он воспринимается человеческим глазом.

Цвет — это не свойство объекта, а особенности его восприятия. Например, в дневное время или при искусственном освещении все предметы имеют насыщенный цвет. Но когда уровень освещённости снижается, уменьшается и контрастность цвета — пока все предметы не станут серыми (например, глубокой ночью при полном отсутствии света).

Цвет воспринимается нами по-разному в силу ряда причин. Одна из них — особенности строения и работы человеческого глаза. 

В сетчатке глаза есть специальные рецепторы: колбочки и палочки, их в среднем по 7 и 130 миллионов соответственно у каждого человека. Колбочки отвечают за цветовосприятие, а палочки — за сумеречное и периферическое зрение. 

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

Помимо физических свойств глаза, на восприятие цвета влияет психоэмоциональное состояние человека и полученный ранее опыт. То есть важно не только то, что человек чувствует здесь и сейчас, но и эмоции, пережитые в прошлом.

Причины разного восприятия цвета

Получается, что разница в восприятии одного и того же цвета может быть вызвана несколькими причинами:

• Неодинаковое количество колбочек в сетчатке глаза. Чем больше колбочек у человека — тем больше оттенков он различает. А ещё возможны нарушения в работе колбочек, тогда возникают нарушения цветового зрения. Некоторые из них назовём ниже.

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

• Психологические особенности человека. Многое зависит от мозга. Например, если мы увидим лимон ночью, то фактически он будет серым. Но мозг с большой долей вероятности воспримет его как жёлтый. 

Контекст, опыт и личностные особенности пользователя влияют на то, как он видит интерфейс, но это отдельная обширная тема. В этой статье я предлагаю подробнее разобраться именно с физиологическими особенностями и нарушениями цветового зрения — и тем, как можно учесть их в UI-дизайне.

Расстройства цветового зрения

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

Но также цветовое зрение может ослабляться и по отдельным цветам — когда нарушается работа колбочек. Тогда возникают такие расстройства:

• протанопия — пользователь не может воспринимать красный цвет;

• дейтеранопия — нарушено восприятие зелёного;

• тританопия — пользователь не воспринимает синий;

• монохромазия — цветовое зрение отсутствует, сохраняется только чёрно-белое восприятие.

Как адаптировать интерфейс для людей с нарушениями цветовосприятия

У пользователей с такими расстройствами нарушено восприятие одного или нескольких основных цветов, и из-за этого они не различают оттенки. Поэтому в неадаптированном интерфейсе элементы для них сливаются в общую массу — и трудно что-то понять и сориентироваться.

Сейчас нет лечения от цветовой слепоты (дальтонизма) и других нарушений цветовосприятия. Но мы, дизайнеры, можем делать интерфейсы доступнее — например, проверяя их перед публикацией на соответствие стандарту WCAG. 

WCAG (Web Content Accessibility Guidelines) — это международный стандарт с общими рекомендациями о том, как обеспечить доступность интернета для всех пользователей, в том числе для людей с особенностями здоровья. Стандарт WCAG используется во всём мире, чтобы минимизировать разницу в восприятии элементов интерфейса разными пользователями. Вот рекомендация WCAG для нетекстовых элементов:

• Контрастность компонентов интерфейса и графических объектов должна составлять не менее 3 : 1 по отношению к окружающим цветам.

• Исключения допускаются для второстепенных элементов — то есть изображений, которые не очень важны для понимания контента.

Как дизайнеру адаптировать интерфейс на практике:

• Обеспечить высокую контрастность элементов (достаточно контрастности, указанной в стандарте WCAG). Проверить уровень контрастности можно с помощью Adobe Photoshop. А если нужно его исправить, наложить на готовый макет корректирующий слой или фильтр Black & White.

• Выделить важные элементы подписями и дополнительными графическими акцентами. Недостаток этого способа — риск перегрузить интерфейс, и тогда уже людям без дальтонизма будет тяжелее воспринимать его.

• Создание отдельной темы для дальтоников. Трудоёмкий, но самый эффективный способ решить проблему.

Инструменты, которые помогут в работе над интерфейсами

• Stark
  Есть варианты для разных платформ и программ, например плагин Figma и расширение для Google Chrome. Stark предлагает набор инструментов: например, чтобы видеть соотношение контрастности элементов относительно друг друга или тестировать интерфейс с помощью симуляторов различных расстройств восприятия.

  

• Adee Comprehensive Accessibility Tool
  Альтернатива Stark — бесплатный на данный момент плагин для Figma. Может немного глючить, но в целом хорошо справляется со своей задачей.

• Funkify
  Расширение для Google Chrome, которое поможет увидеть интерфейсы глазами пользователей с нарушениями зрения. Ещё на сайте funkify.org есть несколько интересных симуляторов: например, помогающих понять, как видят интернет люди с аутизмом.

Полезные материалы об инклюзивности в интерфейсах

→ Considering colour blindness in UX design (with five examples) — статья, которая стала для меня отправной точкой в изучении этой темы 

→ Цвет и его свойства — обзорная статья в Википедии.

→ Цветоощущение — статья в Википедии.

→ Цветовое зрение — статья в Большой медицинской энциклопедии.

→ Нарушение восприятия оттенков красного и зелёного цвета, красно-зелёный дальтонизм и полная цветовая слепота — статья от компании Zeiss, производителя оптики и оптоэлектроники.

→ Эмуляция дефектов зрения в Microsoft Edge — инструкция к инструменту.

Все эти материалы помогут углубиться в тему и помнить о том, что восприятие цвета — штука индивидуальная. Мы видим цвет в интерфейсе по-разному в силу физиологических, психоэмоциональных особенностей, в зависимости от освещения и качества монитора. Поэтому дизайнеры собирают базу знаний и пользуются специальными инструментами, чтобы делать интерфейсы доступнее для значительной части пользователей.