How to Create Brand Colors for Data Visualization Style Guidelines

Your brand colors don’t work for data visualization

Amy Cesal
Nightingale
Published in
6 min readJul 13, 2020

--

The most common push back I hear about creating a unique style guide for data visualization, is “We have a style guide for the brand, just use that!”

What most people don’t understand is that the colors that work for your brand usually don’t work for charts. You need more colors and a larger spectrum of tints and shades to properly make graphs and maps. You also need to be more conscious of how these colors will affect chart readability and accessibility.

If you don’t know what data visualization style guides are or why you need them, read “What Are Data Visualization Style Guidelines?” or watch Why does Data Vis need a style guide?.

Why your brand colors won’t work for data visualization

  • Your colors don’t have enough contrast
  • There aren’t enough colors
  • The colors don’t work for the data

The challenge is balancing your brand identity with creating color palettes for different types of data, and adhering to accessibility requirements for color blindness and contrast.

Example

At one organization I worked for, before I created a data visualization style guide, the guidance for charts was to “use brand green.” This meant that all charts were green, no matter what data they represented. It was hard for readers to tell the difference between graphs in a report, because they all looked the same. Green. To show the complexity of the data, we needed more colors.

A bunch of graphs that are mostly green
BEFORE: Selection of charts before there was a style guide for data visualization

At first, the art director was resistant to adding more colors. We had a palette that worked well for branding and for illustration. It wasn’t until she worked on complex charts and experienced the gaps for herself that she recognized the problem, and supported an expanded color set for data visualization. She needed to really understand why it was necessary.

16 colors for data visualization
AFTER: Palette expansion for data visualization

Brand Identity

You want the spirit of your brand reflected in your charts and graphs for your organization. They should look like they belong to your organization. However, you don’t want a sea of the same color.

Read: your organization’s brand guidelines, and your organization’s mission statement. These will give you the spirit and tone of the organization, and a good starting point.

Use: your organization’s brand guidelines and Coolers.co: the super fast color schemes generator to find other colors, tints, and shades that work well with your brand colors.

a palette of 5 colors
Screenshot from coolors.co

Accessibility Requirements

By including accessible colors in your style guide, the graphics and visualizations you produce using the guide are more likely to be accessible.

Color Blindness

It’s important to know what your colors will look like to people who are colorblind so you know what colors can be differentiated from one another, and which ones look the same. 8 percent of men and 0.5 percent of women of European descent have red/green colorweakness or colorblindness.

Read: The three-part series on color considerations for colorblind and colorweak readers by Lisa Charlotte Rost.

Use: Adobe’s Color Tool which includes a color blindness simulator. Coolors.co also has a colorblindness simulator which you can use as you experiment with your new palette.

color scheme shown with with what people who have 3 types of color blindness would see
Screenshot from color.adobe.com/create/color-accessibility

Color Contrast

You need to have enough contrast between your colors and between colors and the background so that people can read and distinguish them. This is especially important for designing charts to be accessible to people who are visually impaired or have low vision, but are not blind.

Read: Contrast and Color Accessibility by WebAIM to understand contrast standards

Use: Color Palette Accessibility Evaluator by NC State University where you can load your entire color palette and see where you have contrast problems

Different colors on a white, grey and black background
Example from the London City Intelligence Data Visualisation and Information Design Guidelines

Palettes for Data Visualization

Qualitative or Categorical colors

These colors are used for distinct groups of categorical data. Having 5–10 colors that work well together will set you up to have a flexible system.

Read: Color Use Guidelines for Mapping and Visualization by Cynthia Brewer to understand the different color scales.

Use: Color Brewer 2.0: color advice for cartography by Cynthia Brewer
and Viz Palette by Susie Lu and Elijah Meeks to see how your colors look when applied to different charts.

Color wheel of colors for different data categories
Example from the London City Intelligence Data Visualisation and Information Design Guidelines

Sequential colors

Used for data sets to show a range of values from low to high, or to highlight or show a selection or variation of data.

Read: How to Choose Colors for Your Data Visualizations by Michael Yi.

Use: Color Picker for Data by Tristen Forsythe Brown to see the range of saturation of color or Chroma.js Color Palette Helper to create a sequential color scheme.

Sequential colors that go from light to dark
Example from Spectrum, Adobe’s design system

Diverging colors

Diverging colors are used when you have a middle amount and 2 groupings. Often used when there’s a 0 in the middle and values go positive/negative. A prominent example of this is when mapping US political parties as red and blue, with lighter tints of each showing weaker partisanship and grey showing an even balance.

Read: Color Use Guidelines for Mapping and Visualization by Cynthia Brewer to understand the different color scales.

Use: Data Color Picker by Learn UI Design
or Chroma.js Color Palette Helper

3 spectrums of color that go from one color to another with a light tint in the middle
Example from Spectrum, Adobe’s design system

Unique data

In many organization, there are common data patterns that consistently arise which may need unique color combinations. Make sure these combinations work well together in terms of color accessibility.

Data sets that may need unique color combinations:

Read: your organization’s reports and look at what charts your organization produces and Your Friendly Guide to Colors in Data Visualisation by Lisa Charlotte Rost to understand why color is meaningful.

Use: your brain and your voice to talk to people in your organization about what categories of data they regularly visualize

Wrap up

Creating a data visualization style guide should be an introspective process at your organization. Choosing appropriate colors can be one of the most intimidating parts. When considering appropriate colors you need to balance a variety of important factors:

  1. Your organization’s brand identity and feel.
  2. The differential needs of types of charts you produce and data you use (e.g. how many colors do you need in categorical scale, do you need sequential or diverging scales)
  3. The needs of the audience you design charts for. Particularly, readability and accessibility (don’t forget about Alt-Text too!).

As tempting as it is, there is no cookie-cutter approach to making a data visualization style guide, as each organization must to strike a unique balance of these considerations to suit their unique needs for their users. As you embark on this process, I hope the tools and considerations presented here help you find your way. Once you create a data visualization style guide, add it to the list of data visualization style guidelines.

spreadsheet of data visualization style guidelines
List of data visualization style guidelines

Amy Cesal is a designer specializing in data visualization. She is a co-founder of the Data Visualization Society and currently serves on the board. Amy is interested in building style guidelines for data visualization, trying to make everything, including charts accessible, creating bespoke data visualization and experimenting with the boundaries between data and art. She holds a masters in Information Visualization from MICA.

--

--

Amy Cesal
Amy Cesal

Written by Amy Cesal

Amy Cesal is a data visualization designer. She is a co-founder of the Data Visualization Society and serves on the board.

Responses (5)