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.

Blue

blue-lightest
#EEF7FF
blue-lighter
#9DCDFA
blue-light
#54A0E8
blue
#005FB9

Accessible

blue-dark
#02427E

Accessible

Green

green-lightest
#E3FAF2
green-lighter
#81D6B8
green-light
#40AD87
green
#008255

Accessible

green-dark
#006642

Accessible

Yellow

yellow-lightest
#FFF7EA
yellow-lighter
#FFE2AE
yellow-light
#FBD083
yellow
#FFC764
yellow-dark
#EFA92E

Red

red-lightest
#FFE8E8
red-lighter
#FF9090
red-light
#FF6868
red
#DE2828

Accessible

red-dark
#B40000

Accessible

Neutral

white
#ffffff
neutral-lightest
#F5F5F5
neutral-lighter
#D8D9DA
neutral-light
#B1B3B5
neutral-dark
#8B8C8F
neutral-darker
#64666A

Accessible

neutral-darkest
#000

Accessible

Other Colors

transparent
rgba(255,255,255,0)
nw-green
#8ccb32

Legacy Colors

teal-light
#EEF7FF
teal
#005FB9

Accessible