Data visualization guidelines

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 are used to indicate positive or negative performance in data. For positive color, we use a slightly darker Matchacado color for text/icon associated with data to make sure text has enough contrast.

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.

Although we recommend using colors following the order in the palette, we understand there might be edge cases when we need to pair colors in a different way. 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