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.
Blue
Accessible
Accessible
Green
Accessible
Accessible
Yellow
Red
Accessible
Accessible
Neutral
Accessible
Accessible
Other Colors
Legacy Colors
Accessible
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.
Contrast ratio
21:1
Metamorphosis
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.