Проектирование доступных цветовых систем

Перевод статьи от Дэрила Куперсмита и Уилсона Майнера.

В закладки
Аудио

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

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

Достижение правильного цветового контраста — сложная задача, особенно потому, что цвет невероятно субъективен и оказывает большое влияние на восприятие продукта. Мы хотели создать цветовую систему с тщательно подобранными яркими цветами, которые бы также соответствовали стандартам доступности и контраста.

Когда мы оценивали внешние инструменты для улучшения цветового контраста и читаемости в наших продуктах, мы заметили два общих подхода к решению проблемы:

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

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

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

Фон

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

stripe.com

К сожалению, было трудно придерживаться (и поддерживать) правил контрастирования с этими цветами. В «Руководстве по обеспечению доступности Web-контента» предлагается минимальный коэффициент контрастности 4,5 для небольшого текста и 3,0 для большого текста.

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

stripe.com

При выборе доступных цветовых комбинаций каждый дизайнер или инженер должен понимать «Руководство» и в каждой ситуации подбирать цветовые пары с достаточным уровнем контраста. При определенных сочетаниях цветов параметры были ограничены, а доступные сочетания цветов выглядели не очень привлекательно.

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

stripe.com

К сожалению, некоторые из наших цветов все еще не были достаточно контрастными в следующем оттенке. Как только мы получили оттенок с достаточным контрастом на существующих шкалах (правый столбец), наши цвета потеряли много яркости и сочности. Цвета соответствуют «Руководству» на белом фоне, но они тусклые и их оттенки трудно различить.

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

Мы хотели разработать новую цветовую систему, которая обеспечит три основных преимущества:

  1. Предсказуемая доступность. Цвета достаточно контрастны, чтобы соответствовать «Руководству».
  2. Ясные, сочные оттенки. Пользователи могут легко отличать цвета.
  3. Постоянное визуальное равенство. На каждом уровне ни один из цветов не имеет приоритета над другим.

Краткая интерлюдия о цветовых пространствах

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

Мы привыкли работать с цветом на экранах с точки зрения цветового пространства RGB (аддитивное цветовое пространство). Цвета задаются в зависимости от того, сколько красного, зеленого и синего цвета смешано на экране для создания цвета.

stripe.com

К сожалению, хотя такое описание цветов естественно для компьютеров, оно не является естественным для людей. Что нужно изменить, учитывая значение цвета RGB, чтобы сделать его светлее? Более красочнее? Добавить больше желтого?

Для нас понятнее, когда цвета организованы по трем признакам:

  1. Тон: Какого цвета это?
  2. Насыщенность: Насколько это красочно?
  3. Свет: Насколько это ярко?
stripe.com

Популярным цветовым пространством, поддерживающим различие цветов таким способом, является HSL. Он хорошо поддерживается в инструментах дизайна и популярных библиотеках кода для управления цветом. Есть только одна проблема: способ, которым HSL вычисляет уровень яркости, несовершенен.

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

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

stripe.com

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

stripe.com

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

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

Визуализация цвета

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

stripe.com

Цветовое пространство, показанное выше, известно как CIELAB или, ласково, Lab. “L” в Lab обозначает яркость, но в отличие от яркости в HSL, она разработана, чтобы быть однородной для восприятия. Переводя наши цветовые шкалы в цветовое пространство Lab, мы можем настроить наши цвета на основе их воспринимаемого контраста и визуально сравнить результаты.

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

stripe.com

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

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

stripe.com
stripe.com

Наш новый инструмент также показал нам все возможности. Визуализация однородной для восприятия цветовой модели позволила нам увидеть ограничения визуального восприятия. Затененные области на диаграммах представляют собой так называемые воображаемые цвета, которые на самом деле не воспроизводимы и не воспринимаются. Оказывается, «настоящий темно-желтый» на самом деле не выход.

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

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

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

Результаты

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

Наши новые цвета по умолчанию для текста и значков теперь превышают порог контраста доступности, определенный в рекомендациях WCAG 2.0.

stripe.com
stripe.com

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

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

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

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

stripe.com

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

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

Вывод

Мы узнали, что разработка доступных цветовых систем не должна пугать до смерти. Нам просто нужно изменить суждения о цвете:

Используйте однородную для восприятия цветовую модель

При разработке доступной цветовой системы использование однородной для восприятия цветовой модели (например, CIELAB) помогло нам понять, как каждый цвет воспринимается нашими глазами, а не компьютером. Мы смогли проверить нашу интуицию и использовать числа, чтобы сравнить яркость и красочность всех наших цветов.

Доступный не значит сочный

Стандарт доступности WCAG намеренно фокусируется только на контрасте между цветом переднего плана и цветом фона, а не на их яркости. Понимание того, насколько ярким выглядит каждый цвет, помогает отличить оттенки друг от друга.

О цвете трудно рассуждать, инструменты могут помочь

Одна из ловушек однородных для восприятия цветовых моделей заключается в том, что существуют невозможные цвета – нет такой вещи, как «очень яркий темно-желтый» или «сочный светло-королевский синий».

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

Дополнительные ресурсы

Чтобы узнать больше о цвете, мы рекомендуем следующие ресурсы:

  1. Perceptually uniform color spaces” от Programming Design Systems, автор Rune Madsen

  2. Color: From Hexcodes to Eyeballs” автор Jamie Wong

  3. Color Spaces” автор Bartosz Ciechanowski

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

Написать
{ "author_name": "Платон Щукин", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441","ux","stripe"], "comments": 3, "likes": 30, "favorites": 176, "is_advertisement": false, "subsite_label": "design", "id": 90371, "is_wide": true, "is_ugc": true, "date": "Fri, 01 Nov 2019 11:18:30 +0300", "is_special": false }
0
{ "id": 90371, "author_id": 288369, "diff_limit": 1000, "urls": {"diff":"\/comments\/90371\/get","add":"\/comments\/90371\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/90371"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
3 комментария
Популярные
По порядку
–1

“L” в Lab обозначает яркость

Lightness же - "светлота" (согласно русскоязычному переводу Маргулиса)

В графиках не понятно, что означает ось ординат.

Картинки подписаны stripe.com, который является сайтом об обработке онлайн-платежей - што?

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

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

Ответить
0

1. Статью написали инженеры Stripe.com.
2. Наивно ожидать передачу такого инструмента в паблик.

Ответить
1

Минус-то за что мне влепили, дяденька?

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "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": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "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, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }