WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

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.

http://contrast-finder.tanaguru.com/

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.

Cheers
Joe

> -----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
>