Links: Update hover colors to meet color contrast requirements

[nataliafitzgerald]

Links: Update hover colors to meet color contrast requirements

Some link states currently do not meet color contrast requirements for accessibility and should be updated:

These include:

• Link (hover): Pacific 60 on White
• Secondary link (hover): Gray 80 on White (in CF, not DM)
• Destructive action link (hover): Red 80 on White (in CF, only mentioned on buttons page of DM)

Recommendations (some are still works in progress):

Link (primary)

Current: Pacific 60 (#7eb7e8)	Recommendation (Dark Pacific #0050b4)

Link (secondary)

• We will need to adjust the active state as well because it is currently Dark Gray (hover and active are only different in color, all other styling is the same).
• We are limited to Gray, Dark Gray, and Black for accessibility so we will, likely, have to use black for either hover or active. Or, we'll have to come up with a different way to visually differentiate.

Current (Gray 80 - #75787b)	Recommendation (Dark Gray - #43484e)

Destructive action link

Background color for hover and focus states

• Active state will need to be looked at too since it is currently Dark Red (hover and active are only different in color, all other styling is the same)
• The only accessible options for white text on red are Dark Red and Red. So we will not be able to accommodate a 3 separate reds for default, hover, and active.

Current (Red 80 - #dd735d)	Recommendation (Dark Red - #B63014)

What are the use cases for the active state for a link? Not questioning the need, just curious about the use case.

[Scotchester]

Yes, we should do this.

[nataliafitzgerald]

This also poses an issue with our notifications pattern: https://cfpb.github.io/design-manual/page-components/form-fields.html#notifications

Example: Financial well-being

From what I can tell we have two options for addressing this issue:

Option 1: Our color palette includes [Color] 10 for Gray but not for the other colors. Adding [Color] 10 values for the remaining colors in our palette could create tints that allow for proper link contrast. One current use case is notifications but we are also running across this in pattern explorations and in TDP.

Option 2: The other option is to change our default link color to Dark Pacific. I don't prefer this option because the link styling look more like black and stand out less.

If there's a timing issue with getting this done we could settle on [Color] 10 shades for web (Hex values) as an MVP and follow up with the remaining color modes at a later date.

Tagging: @huetingj @designlanguage @stephanieosan @ajbush

[stephanieosan]

Thanks for bringing this up. I support adding 10 values that have sufficient color contrast with Pacific for links. This would begin to open up more flexibility for us on the web and would fix existing issues, like the notification styles not being 508-compliant.

In terms of timing, the TDP team needs colors probably in 2-3 weeks. They release on Sept 27th.

[caheberer]

@nataliafitzgerald that plan sounds like an easy way to resolve the problem.

Not to over complicate things, but I wonder if not just as an MVP, but if we permanently want to make that a web-specific update? I'm only thinking that the 10% value may not make sense for print?

One argument for option 2...I brought this up a while ago and I don't think it was ever resolved, but from what I can recall, our primary button style is not accessible either. (Meaning that it would need to be dark-pacific, in order for white type to be placed on it) I'm not sure if I'm remembering that correctly, or if it outweighs the not different enough argument for the text link next to black text, but maybe an opportunity to be consistent with both?

[marteki]

@caheberer The primary button is accessible, but the hover and focus aren't. The only accessible white-text-on-blue colors are Pacific and Dark Pacific. None of the tints work, so we wouldn't have three states. 😕

The current still-open button color issue: https://github.com/cfpb/design-manual/issues/603

[caheberer]

Thanks for clarifying @marteki

[nataliafitzgerald]

@caheberer I wonder whether we need to confirm this with a desktop print test? For the Grays we use Gray 5 for wells and I am definitely concerned about how well that shows up. But the next step up from there (for wells) would be Gray 10. We'd have to look at the 10 values of our colors to see if they are too light for print applications. Gray 10 (at least) does seem to show up and not be too light.

But yeah, if we do the Hex/RGB for MVP we can then do some sort of basic print test to determine whether we want to also create print values or not.

[ajbush]

@nataliafitzgerald I like your option 1 as well! Changing the hover to Dark Pacific seems like a nice solution.

Would we remove our active link color which is currently Navy and have it just be Dark Pacific? Seems like those colors would render pretty close and we may not need both.

Also regarding the wells, we used to use gray 10 for wells but there wasn't enough contrast for the pacific links to sit on top of it.

[Scotchester]

I would advocate for not removing the active link color. It's an important affordance for letting users know they've successfully activated a link. If the shift from Dark Pacific to Navy is too subtle, I'd suggest considering changing the active link color to a gray.

[ascott1]

Hi all, have we made a decision around this? I'd like to see the appropriate change made on cf.gov. The current recommendation, made by @Scotchester above is:

• Change the hover color to Dark Pacific
• Change the active link color to either Navy or a gray

It seems like a decision needs to be made around the second bullet. Any feedback?

[Scotchester]

We definitely verbally agreed at the October regroup to change the hover color to Dark Pacific, and I am 90% sure we also agreed to keep the active color as Navy.