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
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.