E-mail List Archives

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

for

From: Robert Fentress
Date: Oct 4, 2017 8:26AM


Thanks, Joe. Maybe they would be more receptive to bolding. Good idea!

On Wed, Oct 4, 2017 at 9:43 AM, Joe Chidzik < <EMAIL REMOVED> >
wrote:

> 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>
> > > > > archives at
> > http://webaim.org/discussion/archives
> > > > > > >



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