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 #design-systems 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.