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

Medium опубликовал статью, в которой представлено решение этой проблемы.

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

1. Многие палитры не подходят для людей, плохо различающих цвета

Многие палитры совершенно не продуманы с точки зрения доступности для людей с ограниченными возможностями. Палитра Flat UI Colors — одна из самых популярных в интернете, и понятно почему: она отлично выглядит. Но, как видно из названия, эта палитра создана для пользовательских интерфейсов (UI). Людям, не различающим цвета, сложно воспринимать визуализацию данных, если она выполнена при помощи такой палитры:

2. В палитрах недостаточно цветов

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

Вот несколько примеров с Color Hunt:

3. Сложно различать представленные цвета

Но, погодите-ка, есть палитры, которые выглядят как градиенты. В теории вы могли бы дополнить их любым количеством цветом, так ведь?

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

Давайте возьмем первую палитру и адаптируем ее под серию из 10 типов данных:

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

Как подбирать палитры для визуализации данных

1. Разнообразие в оттенках и в яркости

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

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

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

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

2. Придерживайтесь природных цветовых шаблонов

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

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

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

То же самое можно сказать про переход от светло-зеленого к фиолетово-синему, от светло-желтого к темно-зеленому, от коричневато-оранжевого к холодному серому и т.п.

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

3. Используйте градиентные палитры, в которые входят разные оттенки

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

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

Изучаем правила цветовых сочетаний, используя цветовой круг