Дальтонизм в интерфейсах: как создавать доступный дизайн

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

Перевод моей статьи с блога на Medium.

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

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

Есть несколько теорий цветовосприятия, и самую популярную из них — трехкомпонентную — мы и рассмотрим. Согласно ей, сетчатка глаза содержит специальные клетки, называемые колбочками. Каждая колбочка отвечает за одну часть цветового спектра: красную, зеленую и синюю. Колбочки реагируют на свет и передают информацию о нем в мозг. Полученные данные суммируются, и мы видим цвета. Прямо как в цветовой модели RGB! Только охват цветов у человека шире, нежели у любого из существующих стандартов этой модели. На самом деле мозг и глаза обрабатывают свет вместе, поэтому все мы видим цвета по-разному. Ваш синий может быть чуть более синим, чем у кого-нибудь еще. Но, к сожалению, иногда различия куда больше.

Нарушения в работе колбочек приводят к искажению цветовосприятия. В зависимости от тяжести нарушений человек путает оттенки или вовсе теряет способность различать цвета. Дальтонизм чаще передается по наследству. Самые распространенные типы цветовой слепоты — дейтеранопия и протанопия. В первом случае человек не выделяет зеленую спектральную часть, от чего ухудшается восприятие не только зеленого, но и составных с ним цветов. Такая же проблема и у людей с протанопией, только их глаза менее чувствительны к красной части спектра. Намного реже встречается тританопия, при которой не выделяется синий и желтый цвета, и самый редкий тип дальтонизма — монохромазия (или полная цветовая слепота). Человек c монохромазией различает цвета только по яркости, то есть видит весь мир черно-белым. С таким заболеванием в России даже противопоказано вождение автомобиля. Но почему это так важно дизайнерам интерфейсов?

Любой тип дальтонизма доставляет неудобства; это отражается и на взаимодействие с интерфейсами. В худшем случае дальтоник вовсе не сможет пользоваться продуктом, что расстроит многих пользователей, а бизнес потеряет потенциальных клиентов. Чтобы этого избежать, надо помнить всего пару простых правил. На этом этапе особенно нервный дизайнеры запаникуют: «Вы серьезно? Мне за неделю нужно из ничего собрать дизайн сайта, а вы мне еще проблем подкидываете? Нет у меня времени за этим следить!» Не волнуйтесь, все не так страшно.

Важно понять, что дальтоники видят не менее красочную картинку, чем все остальные. Пусть им недоступны некоторые цвета, но оттенки они различают даже лучше. Еще в 1940 году ученые выяснили, что дальтоники замечают камуфляж там, где его не видят люди с обычным зрением.

А вот отличать тона (красный, желтый, синий, зеленый и т. д.) у дальтоников получается не всегда. Посмотрите, как видят одно и то же изображение люди с нормальным зрением и люди с нарушениями в красной части спектра. В глазах последних цветок и фон окрашены практически одним цветом. И в интерфейсах такое восприятие может обернуться множеством проблем: текст стать нечитаемым, CTA-кнопки незаметными и много чего еще.

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

Контролировать световой контраст удобно, полностью отказавшись от цвета на начальных этапах проектирования. Накидываем интерфейс в оттенках серого, а уже после насыщаем его цветами. Такой подход помимо того помогает сконцентрироваться в первую очередь на UX. Соответственно, чем меньше цветов используем, тем меньше вероятность получить ограниченный дизайн. Хотя никогда не будет лишним полностью обесцветить уже готовый интерфейс ради итоговой проверки.

В Adobe Photoshop это делается с помощью корректирующего слоя Black & White. В большинстве случаев изучения одного макета достаточно, чтобы сделать вывод по всему продукту. Для более точной проверки контраста между двумя конкретными цветами можно воспользоваться бесплатным сервисом Colour Contrast Check. Также есть платное приложение Contrast под MacOS, которое делает все тоже самое, но в офлайне. Оба продукта опираются на международный стандарт Web Content Accessibility Guidelines (пер. «Руководство по доступности веб-материалов»). WCAG описывает, как повысить доступность веб-материалов для людей с ограниченными возможностями. Но, как ни странно, не только цвету нужно уделять внимание.

Цвет не всесилен, никогда не стоит рассчитывать, что он сможет решить все задачи в одиночку. Но с должной поддержкой цвет способен и украсить UI, и улучшить UX.

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

Иногда не лишним будет дополнить интерфейс узорами и текстурами, чтобы подчеркнуть контраст между элементами.

В таких случаях зачастую вводят отдельный режим для дальтоников. Так поступают Trello, Two Dots и многие другие.

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

Обозначу полезные в работе инструменты, которые не довелось упомянуть выше.

Sim Daltonism для iOS и MacOS позволяет взглянуть на мир глазами дальтоников. На мобильных устройствах для этого используется камера, а на маках обрабатывается любая область экрана. В обоих случаях визуализация осуществляется в реальном времени. Для отдельных изображений можно использовать онлайн сервис Colblindor. Там же можно пройти тест Ишихары на самый распространенный тип дальтонизма.

Также в Adobe Photoshop есть встроенная функция, позволяющая увидеть холст глазами дальтоников. Чтобы воспользоваться ей, идем в меню View —> Proof Setup —> Color Blindless - Protanopia-type/Color Blindless - Deuteranopia-type. Теперь можно включать и выключать эту функцию с помощью комбинации клавиш ⌘+Y на Mac и Ctrl+Y на PC.

Помимо этого есть еще расширения для браузеров. К примеру, NoCoffee для Google Chrome.

Разработка доступных интерфейсов не требует много дополнительного времени, а конечный продукт будет удобен в использовании и дальтоникам, и пользователям без нарушений зрения.

#дизайн