Bug: DM header and navigation are not contrast compliant

[nataliafitzgerald]

In testing out the Lighthouse accessibility tool we realized that the Design Manual header and primary navigation do not have sufficient color contrast. The unselected state for text is set to Gray 60 (not accessible). The unselected state should be set to Gray since this is the lightest Gray we can use on White and remain accessible. This will apply to all pages that use the DOCter template.

https://cfpb.github.io/design-manual/

https://eregs.github.io/

[nataliafitzgerald]

Recommendations

Header

• CFPB Design Manual text: Change to Gray (#5a5d61)
• Unselected text: Change to Gray (#5a5d61)

Current	Recommendation

Footer

• "Open source" and "A note about our standards" - Change to H4
• Paragraph text: Change to 1em (16px)
• Background: Change to Gray 5 (#f7f8f9)
• Add rule line: 1px solid Gray 40 (#b4b5b6)
• Link list: Change text to Medium

Current	Recommendation

[marteki]

Thanks, @nataliafitzgerald! I checked the recommendation using the WAVE Chrome extension.

Header

The "CFPB Design Manual" text is actually color compliant in its current state, because of its larger text size! If it makes more sense to change its color because the other header unselected text colors are changing, that's cool.

Footer

Great work figuring out the shifts to make so that the existing hover and focus colors for the links become compliant! And also thank you for bringing the general footer closer to our current design guidelines (re: font weight of link lists and general font size and more).

:+1:

[nataliafitzgerald]

@marteki Yeah, I don't think it hurts to go a little darker on the "CFPB Design Manual" text. In the well, it looks like the hover text for links is also not contrast compliant (Pacific 60) so we have some work to do to bring our global link styling up to par. I went ahead and created an issue for that broader problem here: https://github.com/cfpb/design-manual/issues/605.