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.
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.
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.
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 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
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.
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.
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
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.
Datasets that may need unique color combinations:
- Pro/con, yes/no, or positive/negative
- Political parties (for the US: Republican, Democrat, Independent)
- Gender (and be conscious of your color usage)
- N/A values or No Data vs. Null or Zero (why these matter)
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:
- Your organization’s brand identity and feel.
- 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)
- 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.
Amy Cesal is a data visualization designer and instructor. She is a co-founder and board member of the Data Visualization Society. Amy is a 3 time Information is Beautiful award winner and enjoys creating unusual data visualizations. She holds a Master’s Degree in Information Visualization from the Maryland Institute College of Art, where she is an adjunct professor. Amy has pioneered the use of data visualizations style guidelines, and writes and speaks on the topic.
