Colors

NerdWallet uses color to communicate how things function throughout the entire experience. Color should always be used in meaningful and intentional ways in order to create patterns and visual cues.

Guidelines

• Colors should focus attention to what matters most on the page
• Colors should be consistent among similar interactions

Accessibility

We evaluate the accessibility rating of our color palette using WCAG's 2.0 guidelines for contrast accessibility     . All of the colors in our palette are evaluated at a text size of 13px and normal font weight (type-1) against a white background using this tool     . Accessibility can vary depending on size and weight, so reach out on #currency      if you have a use case you’d like us to evaluate. For more context, the Web Content Accessibility Initiative defines contrast accessibility as having a contrast ratio of at least 4.5:1.

Contrast checker

This tool allows you to select a foreground and background color to determine if that particular combination meets the WCAG's contrast guidelines.

Want a quick way to check if any two colors are an accessible combination? Check out the Colour Contrast Checker      Chrome extension.