Data visualization guidelines
Details about approved color pairings, accessibility guidelines, and pairings to avoid. The data visualization palette can be implemented through our design tokens.
Primary color
We use $color-data-visualization-primary as the main color for data visualization, which is used for showing total value or whenever only 1 color is needed in a visualization.
Semantic colors
Semantic colors are used to indicate positive or negative performance in data. In both cases, we use a slightly darker color for text and icons associated with data to make sure text has enough contrast.
Color pairings
When more than 1 color is needed, colors should be applied in the exact order in the palette to maximize contrast between adjacent colors, in order to help with visual differentiation.
2 colors
3 colors
4 colors
6 colors
8 colors
Pairings to avoid
Although we recommend using colors following the order in the palette, we understand there might be edge cases when we need to pair colors differently. In this case, avoid using the pairings below as neighboring colors. These pairings are hard to tell apart when used:
- for lines or small points under normal vision
- for large areas under red-green or yellow-blue color blindness
