Система подбора цветов для интерфейса. Фундамент. Часть 2

Создание доступной цветовой системы с нуля

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

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

Доступность

Необходимо соблюдать Рекомендации по обеспечению доступности веб-контента (WCAG) 2.0 и целевой уровень AA из раздела 1.4.3, чтобы визуальное представление текста и изображений с текстом имело коэффициент контрастности не менее 4,5 : 1.

Это позволит с уверенностью использовать систему и улучшит юзабилити продукта.

Системность

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

Масштабируемость

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

Строительные блоки

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

  1. Тональная шкала
  2. Именование
  3. Тон
  4. Развитие тональности
  5. Руководство по масштабированию

Тональная шкала

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

Мой подход к определению тональной шкалы состоял в том, чтобы начать с середины и найти средний тон для серого цвета. После этого я расширил этот тон до обеих крайностей, добавив к нему оттенок/тень ( tint/shade) с шагом 20%. В результате получилась шкала с 11 тонами и 10 шагами, как показано ниже.

Система подбора цветов для интерфейса. Фундамент. Часть 2
Шкала оттенков серого

Как вы могли заметить, тон, который я установил в качестве средней точки (#757575), не является идеальным средне-серым в цветовом пространстве sRGB, то есть #808080. Почему можете спросить вы? А что на самом деле такое средний тон серого? – спрошу я в ответ. Как и со многими вещами, вряд ли есть однозначный ответ. Ведь в зависимости от используемой цветовой модели, средняя точка для каждого цвета будет отличаться по тону.

Система подбора цветов для интерфейса. Фундамент. Часть 2
Средний тон серого цвета в соответствии с 3 разными цветовыми моделями

Какой модели я должен придерживаться? Как упоминалось в первой части, доступность – основа этой системы. Поэтому я не следовал ни одному из приведенных выше тонов и продолжал искать тот, который удовлетворяет критерию доступности.

Мне нужен был тон, который будет прямо посередине, чтобы обеспечить симметричную доступность на экстремальном уровне: белом или черном.

Серый-50 обеспечивает коэффициент контрастности 4,6 : 1, как для абсолютно белого, так и для черного. Рассчитано с использованием CCA

Серый-50 (#757575) достигает коэффициента контрастности 4,5 : 1 или выше, когда используется на фоне белого или черного цветов. Это соответствует уровню AA стандартов доступности WCAG для минимального контраста.

10-ступенчатая шкала дает очень классный эффект. Любые 2 тона с 5-ступенчатым зазором дают коэффициент контрастности 4,5 : 1 или выше.

Система подбора цветов для интерфейса. Фундамент. Часть 2
Каждые 5 шагов дают контрастность, большую или равную 4,5 : 1

Это делает систему предсказуемой.

Именование

11 сгенерированных ранее тонов логически соответствуют нашей схеме числового именования, с весом 0–100. Поскольку тоны также включают в себя белый и черный, мы можем исключить их, чтобы получить 9 тонов серого. В результате получается шкала от 10 до 90 для каждой палитры.

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

Например, если я использую серый-10 для фона, я знаю, что серый-50 не пройдет тест контрастности, так как это всего лишь 4 шага от серый-10. Таким образом, ближайший доступный тон – это серый-60. Точно так же на темном фоне, скажем, серый-80, доступным будет текст с цветом серый-30.

Система подбора цветов для интерфейса. Фундамент. Часть 2

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

Система подбора цветов для интерфейса. Фундамент. Часть 2
Apple Music | слева: оригинальные цвета приложения, справа: подправленные элементы для соответствия уровню AA

Тон                          

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

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

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

Когда тон постоянен, изменения светлоты или насыщенности создадут монохромную гармонию. Цвета также гармонично сочетаются, если они имеют одинаковые параметры светлоты и насыщенности независимо от тона. Это называется нюансная гармония.

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

Светимость

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

Система подбора цветов для интерфейса. Фундамент. Часть 2
Тон vs светимость

Мы можем видеть, что каждый оттенок имеет различную воспринимаемую яркость. Чтобы нормализовать это, мы можем добавить / уменьшить светимость каждого тона, чтобы она соответствовала светимости нашего среднего серого тона #757575.`

Система подбора цветов для интерфейса. Фундамент. Часть 2
Нормализированная светимость для тона серый-50

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

Выбор

Я выбрал следующие 5 тонов для своей цветовой системы:

Система подбора цветов для интерфейса. Фундамент. Часть 2
Цветовое колесо, отображающее градусы º для выбранных тонов

По часовой стрелке: красный (0º), желтый (43º), зеленый (99º), синий (204º) и фиолетовый (269º).

Выбор этих значений основан на личном вкусе, потребностях системы, продукта и пользователя.

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

Важно сначала найти средний тон, который будет следовать тому же принципу, установленному в этой системе. При использовании он должен иметь коэффициент контрастности 4,5 : 1 или выше как на белом, так и на черном фоне. Colorable легко справится с этой задачей. Это удивительно простой веб-сайт, созданный Brent Jackson. Он позволяет вам создавать тона с помощью цветовой системы HSL и отображать их контрастность для выбранного цвета фона в режиме реального времени.

Сперва я разработал средний тон для выбранного фиолетового тона (269º), установив насыщенность на 1,00 и светлоту на 0,50. Когда мы проверяем коэффициент контрастности для белого и черного фона, мы понимаем, что этот тон находится далеко от середины, которую мы ищем.

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

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

Система подбора цветов для интерфейса. Фундамент. Часть 2

Я проделал это упражнение со всеми выбранными тонами и подобрал тон-50 для каждого.

Система подбора цветов для интерфейса. Фундамент. Часть 2

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

Развитие тональности

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

Например, если вы создаете редактор исходного кода, подобный Visual Studio Code от Microsoft, вам не понадобится много оттенков для каждого тона, но вам потребуется множество различных тонов, чтобы различать элементы кодинга.

Система подбора цветов для интерфейса. Фундамент. Часть 2
Скриншот Visual Studio Code

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

Система подбора цветов для интерфейса. Фундамент. Часть 2
Скриншот Sketch

В этой статье мы сосредоточимся на реальных методах, которые вы можете использовать для выполнения этой задачи.

Есть несколько методов, которые позволяют предсказуемо развивать тональность.

  • Смешивание оттенков и теней
  • Использование David Johnstone’s swatch and gradient generator
  • Использование сайта Colorable для ручного поиска тонов, равных заранее определенному контрасту

Оттенок и тень

Оттенок (tint) получается путем смешивания тона с различным количеством белого, тогда как тень (shade) получается путем смешивания его с черным. Именно этот метод я использовал для разработки тональной шкалы серого. Для генерации 11 полных тонов, начиная с середины (Tone-50), я каждый шаг смешал с ним 20% белого / черного. Давайте применим этот метод, чтобы найти тональность для фиолетового.

Система подбора цветов для интерфейса. Фундамент. Часть 2
Развитие тональности при помощи метода оттенков и теней

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

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

Использование Swatch generator

Есть еще более простой способ развития тональности. Благодаря David Johnstone, я могу просто ввести нужный тон, а также черный и белый, чтобы сайт сгенерировал определенное количество образцов, охватывающих эти 3 тона. В моем случае всего 11 тонов.

Система подбора цветов для интерфейса. Фундамент. Часть 2
Выбор цвета и градиента Lch and Lab от David Johnstone

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

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

Развитие тональности на основе контраста

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

Colorable позволил мне ввести свой средний тон в качестве обоих цветов, а затем просто переместить ползунок светлоты вверх или вниз, чтобы найти следующий тон на шкале с контрастностью приблизительно 1,35: 1.

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

Система подбора цветов для интерфейса. Фундамент. Часть 2
С помощью Colorable можно найти последовательные тона от фиолтетовый-50, изменив ползунок светлоты до контраста 1,35: 1

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

Ниже представлена ​​фиолетовая палитра, разработанная с использованием всех 3 методов. Можете ли вы сказать, где какой метод?

Система подбора цветов для интерфейса. Фундамент. Часть 2
Сравнение палитры фиолетового, сделанной при помощи 3 упомянутых выше методов

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

Палитра

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

Система подбора цветов для интерфейса. Фундамент. Часть 2
Полная система

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

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

Кроме того, важно отметить, что стремление к уровню доступности AA означает, что мы оптимизируем систему для приложений, где отображаемый текст меньше 18 pt или 14 pt, используя большой вес. Соответственно, более тонкий шрифт может нуждаться в более сильном контрасте, чтобы быть доступным.

Рекомендации по масштабированию

Теперь система может масштабироваться систематически. Давайте предположим, что нам нужно больше тонов для серого между белым и серым-10, потому что интерфейсу нужен макет с различными основными компонентами, нуждающимися в визуальной глубине. Используя метод оттенка (tint – смешивание тона с различным количеством белого), мы можем легко добавить больше тонов в палитру.

Система подбора цветов для интерфейса. Фундамент. Часть 2
Разработка 4 новых тонов между белым и серым-10 с использованием метода оттенка

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

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

Мы можем разработать акцентные тона и просто добавить суффикс в нашу схему именования, например, фиолетовый-40A, где A обозначает акцент (Accent). Этот тон фиолетового должен иметь такой же коэффициент контрастности, как  фиолетовый-40.

Система подбора цветов для интерфейса. Фундамент. Часть 2
Разработка фиолетового-40A, в качестве акцентного цвета для альтернативной палитры

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

Вывод

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

Отдельное спасибо Noor за помощь в написании статьи.

Спасибо моим коллегам из KeepTruckin. Без их поддержки у меня не было бы мотивации двигаться вперед. ❤

Подписывайтесь на автора в Instagram и Facebook. Вы также можете связаться с ним на LinkedIn.

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Каллиграфия и леттеринг для начинающих

Изучение каллиграфии – непростой процесс, но с правильными методическими материалами это может занять меньше времени, чем вы думаете

Zeplin.io – способ подружить дизайнера и верстальщика

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

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

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