1 5 1156x620 - Проектирование доступных цветовых систем в Stripe

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

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

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

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

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

Фон

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование доступных цветовых систем в Stripe

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование доступных цветовых систем в Stripe

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование доступных цветовых систем в Stripe

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

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

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

  1. Предсказуемая доступность: цвета имеют достаточную контрастность, чтобы соответствовать правилам доступности.
  2. Ясные оттенки: пользователи могут легко отличать цвета друг от друга.
  3. Постоянный визуальный вес: на каждом уровне ни один из цветов не имеет приоритета над другим.

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование доступных цветовых систем в Stripe

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

Нам удобнее организовывать цвета по трем признакам:

  • Оттенок (Hue): какой это цвет?
  • Хроматичность (Chroma):насколько он красочный?
  • Светлота (Lightness): насколько он яркий?
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование доступных цветовых систем в Stripe

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование доступных цветовых систем в Stripe

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование доступных цветовых систем в Stripe

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

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

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

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование доступных цветовых систем в Stripe

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование доступных цветовых систем в Stripe
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование доступных цветовых систем в Stripe

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование доступных цветовых систем в Stripe

Результаты

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование доступных цветовых систем в Stripe
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование доступных цветовых систем в Stripe

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование доступных цветовых систем в Stripe

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

Вывод

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

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

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

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

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

Когда цвет трудно подобрать, помогут инструменты

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

Свежие вакансии
                        Emlid Emlid UX/UI Designer Офис Санкт-Петербург
                        e-Legion e-Legion UX/UI Дизайнер Офис Санкт-Петербург
                        Регистратор доменных имен РЕГ.РУ Регистратор доменных имен РЕГ.РУ UX/UI дизайнер Удаленно Москва
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
Все вакансии

Оригинал: Daryl Koopersmith и Wilson Miner

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Новый подход к подбору цвета интерфейса

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

Как цвет влияет на UX

Цвет влияет на все, начиная с того, что чувствует пользователь, и заканчивая тем, как он взаимодействует с ним

Фундаментальные основы цвета в дизайне интерфейсов

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