Color

Use our standard color palette, but don't rely solely on color.

Color can be an important part of the design of your dashboard. However, in a data visualization, color shouldn’t be relied on as the only way to distinguish data.

This guidance draws heavily on several excellent articles on color and data viz.

Use our default SF.gov data viz colors.

The color scheme is the standard if you are embedding dashboards in SF.gov. This is built into the Power BI template.

We do not recommend customizing the color profile. If you need to customize the color template, you will need to ensure the combinations are accessible and colorblind friendly. Ensure color contrast between title, axis label, and data label text and the background are at least 4.5:1. Use accessible colors to check color contrast for background/font. Use this contrast checker and make sure colors pass WCAG standards. Use the Viz Palette tool to test colors using different color deficiency lenses.

📌 Power BI tip: Colors are built into the template. Do not use the lighter shades of the colors. Only use the primary colors, and darker. The lighter colors do not contrast enough with white.

Screenshot of the Power BI template, with all lighter shades of the colors crossed out. The lighter shades do not contrast sufficiently with white.

Avoid relying on color as the only way of showing certain information.

Avoid using color (including conditional formatting) as the only way of conveying information. Instead, use other symbols and markers to differentiate data. You may also need to split a visual into multiple visuals if you find you are relying on color in a legend. Here is an example using shape and color:

Example chart using color and symbols to distinguish different trend lines.

Limit the number of colors.

You may want to use colors to show different categories, to shade data sequentially, or to show data centered around zero converging. No matter what, limit the number of different colors within a visual and use color sparingly to highlight key data.

If you are tempted to use several colors in one visual (more than 3), you may need to explore other types of visuals. For example, converting your visual to small multiples can be more accessible and does not solely rely on color.

Check your dashboard colors

Put your URL into this color checker. You could also use coblis to ensure all elements are visible.