Use cases

When used properly, color can help clarify relationships between data, provide emphasis for certain data points, and maintain a consistent brand voice. When used poorly, color can overwhelm the user, make the data confusing and break with brand standards to appear inconsistent.

• To highlight part of a set of data, or show that things are related, use a tint or a shade of the main color.

• Use categorical color schemes when you’re visualizing groups of things. These are discrete colors that do not imply an visual relationship between the sets of data.

• When you’re displaying sequential data that shows a range of data in a ranked order, use these sequential colors to imply the relationship.

NOTE: The following update information was copy-pasted from the Design Manual, but does not apply to the Design System.

To update the color palette within the Design Manual:

1. Update the values within the CFPB Brand Colors CSV file
2. From terminal within this repo run npm run colors, this will auto-generate a new brand-palette.less file
3. Run grunt build (you may need the -f flag because of linting issues)
4. Run npm start and check /design-manual/brand-guidelines/color-principles.html locally
5. Commit the changes and open a PR.

Once the PR is merged, the Less file needs to be duplicated in Capital Framework CF Core and follow that project’s release process.

Accessibility

Color should never be solely relied on to convey meaning in a visualization because of accessibility standards for people who are blind and visually impaired. There should be other clues beyond color to convey meaning or relationship; this is a key reason that also directly labeling data and using patterns is important.

You can use the Color Palette Accessibility Checker to check and confirm the accessibility of CFPB colors at different type sizes.

Color blindness

When choosing colors for a graph, keep in mind that they may look different to people with color blindness. About 1 in 12 men with Northern European ancestry have green/red color blindness.

Instead of green/red, the teal/red color combination should used instead for pro/con, yes/no, positive/negative relationships. This both improves accessibility associated with color blindness, and also leaves the CFPB green color to represent the brand.

This is an example of a visualization using the green/red combination, and how it can appear to someone with red/green color blindness:

This is an example of a visualization using the teal/red combination, and how it can appear to someone with red/green color blindness:

• Do not use color as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
• Text should have a contrast ratio of at least 4.5 : 1, but there are exceptions.
  • For large text, a contrast ratio of only 3 : 1 is necessary. Large regular text is at least 18pt/24px, while large bold text is 14pt/18px.
  • Text or images of text that are either pure decoration or not visible, or are part of a logo, picture that contains significant other visual content, or inactive UI components (like disabled form controls) do not have a color contrast requirement.

The Colour Contrast Check is a nice tool for testing color contrast ratios.