Дизайн Ivan Tuchkov
327

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

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

В закладки

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

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

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

RGB в твоей голове

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

В мире насчитывают свыше 250 миллионов людей с нарушениями зрения, из которых 36 миллионов полностью слепые.

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

Сравнение восприятия цветового круга людьми с разными типами цветовой слепоты. Здесь и далее цветовая слепота имитируется с помощью сервиса Coblis

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

Контраст черного и белого

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

Разве можно сказать, что монохроматик не способен наслаждаться теми же пейзажами, что и остальные?

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

{ "items": [{"title":"\u0424\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f \u0433\u043b\u0430\u0437\u0430\u043c\u0438 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430 \u0441 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0437\u0440\u0435\u043d\u0438\u0435\u043c","image":{"type":"image","data":{"uuid":"243bd8ce-3c2d-b4ed-6cbf-68752932e783","width":1920,"height":1280,"size":343571,"type":"jpg","color":"","external_service":[]}}},{"title":"\u0422\u0430 \u0436\u0435 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f \u0433\u043b\u0430\u0437\u0430\u043c\u0438 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430 \u0441 \u043f\u0440\u043e\u0442\u0430\u043d\u043e\u043f\u0438\u0435\u0439","image":{"type":"image","data":{"uuid":"e8726b67-6712-ad2d-1654-444ad7016ec4","width":1920,"height":1280,"size":330689,"type":"jpg","color":"","external_service":[]}}}] }

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

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

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

На цвет нельзя полагаться

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

Люди с нарушениями в красной и зеленой частях спектра правильно определят цвета примерно 5 карандашей из стандартной коробки с 24-мя цветными карандашами.

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

Square помимо цвета использует графический символ для отображения ошибки заполнения поля

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

В Messapps мы добавили пунктирные линии к диаграмме приложения Vola

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

Обычный режим и режим цветовой слепоты игры Two Dots на iOS

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

В настройках Slack можно выбрать одну заготовленных цветовых схем для дальтоников

Полезные инструменты

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

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

Скриншот приложения Sim Daltonism из Mac App Store

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

Проверка доступности интерфейса в Adobe Photoshop

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

Заботьтесь о всех

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

#дизайн

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Ivan Tuchkov", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 3, "likes": 11, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 44115, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 44115, "author_id": 195182, "diff_limit": 1000, "urls": {"diff":"\/comments\/44115\/get","add":"\/comments\/44115\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/44115"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

3 комментария 3 комм.

Популярные

По порядку

1

Неправильный подход. Не надо каждому разработчику огород городить. Функция цветовой корректировки для дальтоников должна быть встроена в ОС так же как и голосовой интерфейс для слепых.

Ответить
0

А я дальтоник, если говорю, что цвет красный, а 5 женщин мне говорят, что он коралловый???

Ответить
1

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

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления