Контраст, подбор цвета и палитра для людей с нарушениями зрения
В дизайнерской среде крайне редко встречаются специалисты, работавшие над доступными интерфейсами. С тех пор как дизайну назначили основной задачей продавать и продавать больше любыми способами, он перестал решать задачи эргономики и доступности.
Исходный файл с палитрой в формате sketch (Версия 95 и выше)
Исходный файл с палитрой в формате sketch (Версия 95 и выше)
Общие тенденции и исключения

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

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

Сегодня дизайн должен быть не только честным. Ему следует стать и ответственным.

Последние годы, наблюдаются и исключения. Есть и по-настоящему вдохновляющие примеры. Be My Eyes — приложение для помощи слабовидящим или незрячим людям. Приложение состоит из глобального сообщества незрячих и слабовидящих людей, а также видящих волонтеров.

Контраст и подбор цвета

Помочь дизайнеру в работе может программное обеспечение.

Color Oracle имитирует дальтонизм. Вы сможете посмотреть, как видят ваш интерфейс люди с обычными нарушениями зрения. Приложение бесплатное.
Contrast поможет с подбором цвета. Есть плагин для Figma и нативное приложение для Mac. Обещают помочь с достижением стандартов WCAG 2.0.

Палитра для людей с нарушениями зрения

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

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

Литературу от последнего в нашей реальности не купишь, а если как-то купишь, то не заставишь команду её прочитать. Остаётся решать задачу доступным и оптимальным способом. Зачастую разработчики используют готовые решения для визуализации или их дорабатывают. Даже приёмы с штриховкой, доставшиеся нам от монохромной полиграфии, не всегда могут помочь с решением наших задач.

Для примера взял историю с анализом отклонений и допусков. Изображение позаимствовано с сайта компании InterCAD — http://icad.spb.ru/articles/149/
Для примера взял историю с анализом отклонений и допусков. Изображение позаимствовано с сайта компании InterCAD — http://icad.spb.ru/articles/149/
Проверяем решение с использованием Color Oracle. Обнаруживаем некоторые затруднения со считыванием.
Проверяем решение с использованием Color Oracle. Обнаруживаем некоторые затруднения со считыванием.

Для решения подобных задач бюджетным способом, изучил доступные материалы, провёл исследование и составил свою палитру.

Рекомендую использовать комбинации цветов А-Б или Б-В. Также, дополнительно, можно предусмотреть переключатель и представление для шкалы Г, когда задачу нужно решить наверняка.
Рекомендую использовать комбинации цветов А-Б или Б-В. Также, дополнительно, можно предусмотреть переключатель и представление для шкалы Г, когда задачу нужно решить наверняка.

Скачать исходный файл (sketch, 107КБ)
Скачать SVG (svg, 13КБ)

↑ Наверх


Пётр Лутов
Дизайн в разработке программного обеспечения