Практическое руководство по созданию цветовой системы для всех элементов дизайна

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

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

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

Эффективная цветовая система

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

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

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

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

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

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

Набор нейтральных цветов

Фон и передний план

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

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

Чтобы светло-серый был более ярким, можно добавить небольшой оттенок. Например, насыщенность синего оттенка в размере 1% сделает меню более интересным по сравнению с насыщенностью, равной 0%. Однако добавление слишком большой насыщенности может сделать меню чересчур ярким. Так оно будет перетягивать на себя внимание. Обратите внимание, как с насыщенностью, равной 5%, цвет теряет свою нейтральность.

Контуры и визуальные подсказки

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

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

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

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

Контрастность текста

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

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

Выбирая эти три цвета, вы должны убедиться, что они доступны для всех пользователей. Для проверки следует использовать обновленный калькулятор цветового контраста WCAG (прим. (Web Content Accessibility Guidelines — Руководящие принципы доступности веб-контента), например Bridge PCA. Все остальные калькуляторы цветового контраста не обновляются.

Математика и методы устаревших калькуляторов WCAG неправильно рассчитывают контрастность, основываясь на человеческом восприятии светлого текста на темном фоне. Впервые это понимание было представлено в статье «Мифы о доступности цветового контраста» в 2019 году.

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

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

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

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

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

Названия для нейтральных цветов

Названия для набора нейтральных цветов должны быть следующими:

• Фон.
• Передний план (Плашка).
• Обводка.
• Визуальная подсказка.
• Высокий контраст.
• Средний контраст.
• Низкий контраст.

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

Набор акцентных цветов

Взаимодействие

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

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

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

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

Ошибка

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

Завершение

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

Названия для акцентных цветов

Названия для набора акцентных цветов должны быть следующими::

• Взаимодействие.
• Ошибка.
• Завершение.

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

Полная цветовая система

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

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