E-mail List Archives

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


From: Joe Chidzik
Date: Oct 4, 2017 7:43AM

Not aware of one tool that does all you need, but I find the Tanaguru contrast finder incredibly useful at being given a failed contrast combination, and suggesting a number of conformant combinations by changing either the foreground background colour accordingly (and automatically).

I guess you could go through the list of compliant colour combinations it suggests with a colour picker to find a combination that meets your requirements for foregroundbackground, AND textlink text colours.


Of course, underlining links is desirable, but would they settle for bolding them instead if underlining is not an option? This would also satisfy the requirement.


> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ]
> On Behalf Of Robert Fentress
> Sent: 04 October 2017 14:37
> 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>
> > > http://webaim.org/discussion/archives