WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: link color that meets contrast requirements relative to bg and surrounding text?

for

From: Angela French
Date: Oct 4, 2017 9:28AM

I struggled with this (with my communications team) for almost two years but finally got them to let me style hyperlinks with a light-weight border-bottom.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Robert Fentress
Sent: Wednesday, October 04, 2017 6:37 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] link color that meets contrast requirements relative to bg and surrounding text?

Anybody know of a tool or strategy for efficiently finding a link text color that meets 3:1 contrast requirements relative to surrounding text <https://www.w3.org/TR/WCAG20-TECHS/G183.html>, while simultaneously meeting the 4.5:1 contrast requirements for background <https://www.w3.org/TR/WCAG20-TECHS/G18.html>. The design team doesn't want to add an underline to links (except on hover and focus), which, as I interpret it, means that the colors used for those links need to have a luminosity contrast ratio of 3:1 relative to the surrounding text, which is set as black. The problem is that whatever color is chosen for that purpose also needs to have a luminosity contrast ratio of 4.5:1 relative to the background, which is a very light gray, #FAF4F3. I've tried the palette recommended in their brand guidelines for combinations that might work, but none of them do, so now I'm just kind of randomly flailing about trying to find a color that works with one constraint, while not violating the other. I darken, I lighten, I test, I rinse, I repeat, and so on.
There's gotta be a more efficient way. Keep in mind I'm trying to hew (or
hue--ouch!) as closely to the palette used on the rest of the site, so I can't just have any old color. Ideas?

Best,
Rob

--
Rob Fentress
Senior Accessibility Solutions Designer
Assistive Technologies at Virginia Tech
Electronic Business Card (vCard)
<http://search.vt.edu/search/person.vcf?person54847>
LinkedIn Profile
<https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>