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.

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

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.

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.