Data Visualization Design Guidelines

When working with data visualization, we often worry more about the type of graphic or the quality of the data than the colors we will represent it with. The definition of a suitable color scheme is arguably one of the most overlooked aspects when non-technical users create their charts. In this short guide, we will go over the steps we take and the techniques we use to build beautiful, appealing and adequate color themes.

Types of palettes

The color swatches we choose to create a data visualization theme depend, of course, on the project or client we are building it for. We need to keep in mind the brand or logo colors (or whatever visual identity there is) to design suitable and appealing color schemes. Still, we need to choose and adapt these colors carefully in order to come up with the types of palettes we need and represent data in an adequate way.

Qualitative

A qualitative or categorical scale is a group of colors that represent categories, as opposed to numbers. Categories are basically names of things (car brands, people, organizations…) meaning that they are not ordered in a particular way or have a different relevance on the graphic. This is why categorical scale colors should be clearly distinguishable and show no particular hierarchy between them.

How to create a qualitative scale?

To start building the color scheme, we first identify the colors that represent best the organization, product or project (brand colors, logo colors, webpage colors, social network colors, etc.) and use these as a base. We need to make sure that the colors we start off with work together for data visualization, so we check if they contrast enough. To do this, we use Viz Palette. This tool allows us to check if the colors in our palette are distinguishable enough for people with and without different forms of color blindness. It even alerts if the color conflict would present only in thin lines or in medium and large areas as well.

Figure 1. Viz Palette allows users to evaluate color palettes to assure they are distinguishable enough for people with different kinds of color blindness.

As we are aiming for a categorical color scheme, it is best if our base colors are not different shades of the same color. In categorical scales, colors need to be different from one another as they represent categories in no particular order. Using different shades of the same color could confuse our users into thinking that the variable being visualized is a continuous one and not a categorical one, thus assigning a particular meaning to the color of each category (order, importance, value, etc.). However, when building palettes with more than 5 colors it is sometimes very useful to use a dark shade of a color we already used, because it generally has enough contrast with the other palette colors and will not cause color conflicts. It is still very important to use this technique very carefully and as little as possible, so as to avoid ending up with a sequential scale.

Figure 2. The chart on the left could confuse the user into thinking that color is representing another numerical value and not just differentiating between countries.

Once we decide on our base colors, we need to add more shades to our scheme. Designspiration is a tool that allows us to search artistic images according to their color palette. It even gives us the specific palette of any image we select. This webpage and others like Behance or Pinterest are great sources of inspiration to start adding new shades to our palette.

Figures 3 and 4. Designspiration is an image search engine and palette finder, very useful to find inspiration on color schemes.

Before adding a new color to our design, we need to check if it has enough contrast with the background. To do this, we use Color review, which shows us the contrast between two specified foreground and background colors and show a warning if the contrast is too low for texts and headlines to be read.

Figure 5. Color review helps users check the contrast between two colors.

Each time we add a new color, we check on Viz Palette how well it works with the other ones and start adjusting their luminosity, hue or saturation until we have no color conflicts or until we realize we need to try with a totally different color. Beautiful and harmonious seven-color palettes with no color conflicts are understandably very scarce, which is why we try to make sure the four principal categorical colors of our palette show no color conflicts and then acknowledge the possibility of having minor conflicts with the 3 or 4 complimentary colors. What is important is to minimize the conflicts and keep in mind the cases in which we will need to use other types of visual language to make sure any user can have the possibility to understand the graphics, such as patterns, textures, text, etc.

Figure 6. Minimizing color conflicts for grayscale vision is particularly challenging. Using patterns would surely be a more efficient solution than changing the palette colors.

Once we decide on a categorical palette, we are ready to create our continuous scales: sequential and divergent.

Sequential scales

Sequential scales are gradients of one color to another and are used to show numerical and continuous variables such as sales amounts, height or population, as well as ordered categories like the days of the week. One of the colors represents the minimum value (usually zero) and the other one, the maximum value. It is important that the colors visually convey the meaning of minimum and maximum, which can be done by increasing the saturation or decreasing the luminosity of the shades as they get closer to the maximum value.

How to create a sequential scale?

We recommend using colors already included in the categorical palette or colors that complement those to actually give the sense that these belong to the same color concept. To simulate our sequential scales, we use Chroma.js Color Palette Helper, which allows us to specify our base colors and number of output colors, adjust the luminosity, hue and saturation of our input colors and even check if our scale is colorblind-safe.

First, we need to choose the colors we will use to build the scale. Although it is tempting to choose one particular color –maybe the main brand color– and have the scale to be different shades of it, we recommend playing with Chroma’s color step feature.

Figure 7. Using only one color to build the sequential scale.

To do this, we first choose two of our categorical palette colors. It is easier to come up with an adequate sequential scale if one of our colors is brighter than the other or if one is more saturated than the other. Another option is to try using colors with similar saturations or luminosity and tweak one of them. However we choose our colors, we keep in mind that these need to convey the idea of increase and decrease of values on our scale.

Figure 8. Choosing two of the categorical palette colors to build the sequential scale.

Once we have chosen our minimum and maximum swatches, we try using different colors as steps between the extremes to give our scale a change of hue. It will make a more unique scale and give more of an identity to our color scheme.

Figure 9. Adding a color stop to make our sequential scale more appealing.

Divergent scales

Divergent scales are continuous color scales of two opposed colors with a neutral shade in the middle. These are used to represent a continuous variable that can range from one extreme to another. One clear example could be the scale used in a map of political party representation in the U.S., one end representing states with Democratic majorities and the other one, states with Republican majorities.

How to create a divergent scale?

As well as with sequential scales, we use colors already included in our categorical palette to wrap up our color concept. We try to choose the pair that complement each other best, but as we may have various pairs that work just fine, we try different combinations and choose the most interesting and appealing one.

For the center of the scale, we recommend following Lisa Charlotte Rost’s advice to use a very light shade of gray, but also adding a slight tint to it according to the overall color scheme.

Figure 10. Diverging color scale with a light gray in the middle.

We like to take advantage of the color steps feature to make our scales more interesting and in sound with our color concept. We also need to make sure the steps don’t make the opposite tones look similar between them. The user should be able to see any of the color shades in our spectrum and know to which end it belongs to.

Figure 11. Diverging color scale with additional color steps.

We recommend keeping a similar saturation in the opposite sides of the scale. If any of our colors is less vibrant, we change it delicately in order to preserve the color concept we chose and at the same time obtain a well-balanced divergent scale. This balance is important because both ends of the scale should have the same visual weight in the graphic, so that the user does not perceive an end to be more important or relevant than the other one.

Figure 12. Diverging color scale with a colorblind-safeness warning.

We continuously check the colorblind-safe indicators that this tool provides. If we have a warning, it means that some of the color steps across the scale are similar –to a user with any form of color blindness– in spite of being on opposite ends. To fix this, we select the color blindness simulation that has a warning and start changing the values of our color steps to understand what we need to change (luminosity, hue or saturation) until we have a colorblind-safe palette.

Figure 13. Diverging color scale with balanced tones and no warnings.

We recommend having an alternative diverging color scale considering the need to assign –or not– a particular color to a set of data. For example, if your categorical color scheme has pink and blue as its main colors, you can absolutely have your diverging scale use these two as its extremes. However, to plot gender data (which is a very common task) you may want to have an alternative scale and avoid perpetuating stereotypes with the use of colors. Think of the type of data you would probably plot in the future and have at least two diverging color scales to attend to those.

Selecting the right font

The font family we choose to use with our color scheme is another aspect to study carefully. As with colors, we first need to consider the fonts that are already being used in the project or brand as part of its visual identity. Then again, we may need to adjust these fonts depending on their readability on small sizes, their contrast with the background and the type of text they will be used on.

Titles: Font families, weights and sizes

For titles, we recommend choosing a font with a bold weight and in a larger size in order to accentuate the hierarchy of the title in relation with other text elements. This will tell the user where to read first and will also give them the sense of a more balanced composition.

Figure 14. Making titles bolder and greater in size helps convey the hierarchy of the text elements and give a balance to the composition.

As to the size of the titles, we mostly have them to be 25px as our charts usually are 500px in height. However, this value can change depending on the font being used or the space available. Some fonts look huge with a 25px size and some look quite small.

Figure 15. These texts have the same size in pixels, but their perceived sizes change depending on the font family being used.

Titles are also a great opportunity to showcase the project’s or brand’s most emblematic font, as these will usually be a larger size than the rest of the text and thus will have less readability restrictions. We recommend using titles to deliver as much identity as possible to our visualizations because due to their size, titles allow using a wide variety of font types. Labels and captions present much more limitations. It is still important to keep in mind that data should be the main element on the chart and the title should not overshadow it.

Figure 16. Using a distinctive font on the titles can help give charts more of the brand or project identity.

Labels and captions: Font families, weights and sizes

When choosing a font for the labels and captions, we strive to maximize legibility, reduce visual noise and keep in touch with the overall visual identity. Google Fonts is the library we use the most because it offers high-quality free fonts and it is widely used. Also, it has a great variety of fonts, some of these especially designed to maximize legibility.

Figure 17. We use Google Fonts to find high-quality free fonts.

Serif fonts are broadly used for paragraphs because of their good legibility. Though these may work for big chunks of text, we try to avoid using them in labels, as the Serifs add more visual elements to the chart and could increase the noise in it. We try to put the actual graphic in the spotlight and use the labels as secondary aids. For this reason, we mostly use sans-serif fonts in our labels. However, mixing serif and sans-serif fonts is a great idea to create a dynamic visual identity, which is why we have used serif families in the caption text and in the titles.

Figure 18. Mixing serif and sans-serif fonts can result in a good balance between good legibility and a clean visual identity.

Font color and contrast

Another important decision that makes the difference between legible and illegible text is the font color. To make this decision, we use a tool we mentioned before: Color review. When we select our background and our font colors, the tools calculates the contrast between them and shows alerts when the contrast is not high enough for headlines, large text or small text. This evaluation is made in compliance with the Web Content Accessibility Guidelines (WCAG). We recommend choosing colors that result in a contrast higher than 7 –which means getting a AAA rating– as labels are usually very small and we need them to be as legible as possible.

Figures 19, 20 and 21. Color review shows different ratings according to the contrast between two colors.

Adjusting for dark backgrounds

It is always useful to have an alternative palette just in case our visualization is going to be used on a dark background. We will need to check if any of our categorical colors or sequential scales has a very low contrast with the background and also adjust the color of our axes and grids. But first, we will need to choose a background color.

Choosing a background color

For dark themes we recommend using a very dark gray –not #000000 black– background. This will prevent users from getting tired eyes. Most of the times we try using a gray with a hue that complements the color palette. For example, if we have different blue shades in our palette, we try using a bluer gray. It will definitely give more identity to our whole color scheme.

Figure 22. Using grays with hue can considerably improve a style guide color concept.

Add note on color perception in context

Adjusting the categorical scale

Sometimes our original color scheme works just fine with what we chose in the step before, but it is common to have to change a color because it is dark and does not have a good enough contrast with the background. A simple adjustment of the color’s luminosity value can be sufficient, but when this creates more color conflicts, a good option is to try using a color with the same hue but much brighter –even to the point of being pastel–. Pastels are usually good and straightforward choices while adjusting a palette to a dark background because their high brightness and low saturation makes them less likely to show any color conflicts with the other colors.

Figure 23. Changing a dark color for a pastel one can be an easy way to adjust the palette to a dark background.

If it is the main brand or project color that does not have enough contrast with a dark background, we try replacing it with the second most representative one. This is a great way of showcasing different brand or project colors and giving an interesting turn to our color concept.

Figures 24 and 25. Changing the main color of the palette when used in dark backgrounds can be useful to highlight different brand colors while ensuring a good contrast.

Adjusting the sequential and divergent scales

When adjusting the categorical palette, it sometimes will be necessary to adjust the continuous ones. If one of the categorical colors we had to adjust in the step before is at the end of any of our sequential or divergent scales, we can easily replace the old value with the new one in these scales, too. It is important to check that the scales are still balanced and visually correct according to the aspects we mentioned before.

Even if the scales do not present any contrast issues with dark backgrounds, it can be a good idea to saturate and illuminate our scales a bit to make them more eye-catching –depending on the color concept, of course–. Dark backgrounds allow using beautiful light and shiny colors that would be too bright for white backgrounds.

Figure 26. The original sequential scale on the top of this image would have worked fine for a dark background, but we seized the opportunity to make a more vibrant sequential scale.

Adjusting the axes and grids

On certain cases we will need to alter the colors of the axes and grids, too. Basically, our approach consists of trying to preserve the necessary contrast between the background and them. Axes usually need to be adjusted to a lighter shade to keep being very noticeable. Grids, on the other hand, generally need to be darker to reduce the noise in the area of the graphic.

Figures 27 and 28. Grids and axes before and after adjusting for dark backgrounds.

Additional resources

What to consider when choosing colors for data visualization

Your Friendly Guide to Colors in Data Visualization

Viz Palette

Designspiration

Color review

Web Content Accessibility Guidelines (WCAG)