Руководство по доступности цвета в дизайне продукта

О доступном дизайне много говорят, но задумывались ли вы когда-нибудь о доступности цвета?

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

Эта история от Джастина Рейны

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

Почему доступность так важна?

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

Кроме того, не создавать доступные продукты - это просто грубо, так что не будь грубым.

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

«Не создавать доступные продукты - это просто грубо, так что не будь груб».

Помимо того, что доступность является этической передовой практикой, существуют также потенциальные правовые последствия для несоблюдения нормативных требований в отношении доступности. В 2017 году истцы подали не менее 814 федеральных исков о якобы недоступных веб-сайтах, включая ряд групповых исков. Различные организации стремились установить стандарты доступности, прежде всего Совет по доступу Соединенных Штатов (раздел 508) и Консорциум World Wide Web (W3C). Вот обзор этих стандартов:

  • Раздел 508: соответствие 508 относится к разделу 508 Закона о реабилитации 1973 года. Вы можете прочитать подробное постановление здесь, но в заключение, раздел 508 требует, чтобы ваш сайт был доступен, если вы являетесь федеральным агентством или создаете сайты на от имени федерального агентства (например, подрядчики).
  • W3C: Консорциум World Wide Web (W3C) - это международное добровольное сообщество, которое было создано в 1994 году и разрабатывает открытые стандарты для Интернета. W3C излагает свои руководящие принципы обеспечения доступности веб-сайтов в рамках WCAG 2.1, который по сути является золотым стандартом для лучших методов обеспечения доступности веб-сайтов.

Обеспечение доступности вашего продукта цветом

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

Вот несколько быстрых советов, которые помогут вам создать продукты с доступным цветом.

Добавьте достаточно контраста

Чтобы соответствовать минимальному рейтингу AA в W3C, отношение контраста фона к тексту должно быть не менее 4,5: 1. Поэтому, при разработке таких вещей, как кнопки, карточки или элементы навигации, обязательно проверьте коэффициент контрастности ваших цветовых комбинаций.

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

Не полагайтесь только на цвет

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

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

Контраст состояния фокуса

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

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

Документирование и социализация цветовой системы

Наконец, самый важный аспект создания доступной цветовой системы - это дать вашей команде возможность ссылаться на нее, когда это необходимо, чтобы все были уверены в правильном использовании. Это не только уменьшает путаницу и отток, но также гарантирует, что доступность всегда является приоритетом для вашей команды. По моему опыту, явный вызов оценки доступности определенной цветовой комбинации в наборе пользовательского интерфейса или в системе проектирования наиболее эффективен, особенно когда общение с командой с помощью инструмента (например, InVision Craft или InVision DSM). Вот пример того, как документировать комбинации цветов фона и текста и рейтинг доступности каждой комбинации.

Давайте станем доступными

Это всего лишь несколько советов, которые сделают ваш продукт более доступным, но имейте в виду, они касаются только цветовой доступности. Чтобы лучше понять правила доступности, я рекомендую ознакомиться с WCAG 2.1. Хотя эти рекомендации могут быть немного устрашающими, есть множество ресурсов, чтобы помочь вам в этом, и, если вы сомневаетесь, не стесняйтесь обращаться к дизайнерам в вашем регионе (или через Интернет) за помощью.

Вам понравилась эта запись? Подробнее читайте в Inside Design, новом блоге InVision.

Первоначально опубликовано на invisionapp.com.