Colors

Palette

This palette is designed to delight users with a mix of warm and cool tones that are as unique as they are vibrant. The simple and minimalistic nature of this palette will ensure users can differentiate categories and sequencing of data more easily.

We encourage everyone using these standards to reference their own Agency’s brand guidelines and to reference the Text Accessibility section below for guidance on using 508-compliant colors.

Featured Colors

This palette’s featured colors are teal, navy, orange, and grey.

Sequential Colors

Each of the four primary colors can be used to create a data visualization with a sequential color palette. This type of palette can be used when data values can be ordered from low to high. To reflect that the data is sequential (also known as continuous), all of the data values should be variations of the same color hue, where lower values are lighter and higher values are darker.

Sequential colors are most commonly used to render a single category of data, such as a bar chart, or when visualizing a complex set of data with many categories.

Teal Palette

Blue Palette

Orange Palette

Grey Palette

Qualitative Colors

The four primary colors can also be used to create a qualitative color palette. Qualitative colors are used to render categorical data, such as gender or race, that has no inherent sequential order.

When using this type of palette, try using colors with just enough variance in their hue and brightness to ensure all of the categories are represented similarly.

Example Palette

Alternatively, a highlight color can be used with a qualitative palette to draw attention to a particular category of data. With this type of palette, a bias is shown towards the highlight color so use this type of palette with caution.

Example Palette with Highlight

Diverging Colors

Like sequential colors, diverging colors are commonly used to render a single category of data when data values can be ordered from low to high. The key difference however is that diverging colors bring attention to a significant break point in the data. To illustrate this, a different color is used on each end of the value scale and the breakpoint, or middle value, is represented as a neutral color. Data values that are furthest from the break point are shaded darker, while values that are closer are shaded lighter.

Example Palette

No Data Colors

Occasionally, it is necessary to color in elements of a data visualization where no data exists, such as in maps. In these cases, a neutral color should be used to represent a “No Data” class. This class should be added to the visualization’s corresponding legend.

Color Accessibility

The WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full color spectrum are able to read the text.

Best Practices

In general, any steps taken to improve the color accessibility of a data visualization improves the user experience for everyone. Below are a list of recommendations for how to make data visualizations more user-friendly:

• Use text elements to label data directly to rely less on color.
• Use tools such as color brewer to select a palette that is 508-compliant.
• When using sequential and diverging colors, adjust your color palette to ensure there is enough contrast between colors.
• When using a qualitative color palette where contrasting is not encouraged, try to avoid conflicting color combinations. Some examples include:
  • red & green
  • green & brown
  • green & blue
  • blue & grey
  • blue & purple
  • green & grey
  • green & black

Text Accessibility

The options below offer color palette combinations that fall within the range of Section 508 compliant foreground/background color contrast ratios. To ensure that text remains accessible, use only these permitted color combinations.

If you choose to customize beyond this palette, this color contrast tool is a useful resource for testing the compliance of any color combination.

Accessible Text Combinations

Colors on White Background

Neutrals on a Colored Background