Про инклюзивность в интерфейсах и то, как дизайнеру учесть особенности цветового зрения.
Привет! Меня зовут Николай Комиссаров, я руковожу командой дизайна Пульса (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 — инструкция к инструменту.
Все эти материалы помогут углубиться в тему и помнить о том, что восприятие цвета — штука индивидуальная. Мы видим цвет в интерфейсе по-разному в силу физиологических, психоэмоциональных особенностей, в зависимости от освещения и качества монитора. Поэтому дизайнеры собирают базу знаний и пользуются специальными инструментами, чтобы делать интерфейсы доступнее для значительной части пользователей.
