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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например, мы изменили дизайн нашего компонента 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

#stripe #ux #интерфейс