E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: Robert Fentress
Date: Wed, Oct 04 2017 7:36AM
Subject: link color that meets contrast requirements relative to bg and surrounding text?
No previous message | Next message →

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>

From: Joe Chidzik
Date: Wed, Oct 04 2017 7:43AM
Subject: Re: link color that meets contrast requirements relative to bg and surrounding text?
← Previous message | Next message →

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 ADDRESS REMOVED = ]
> On Behalf Of Robert Fentress
> Sent: 04 October 2017 14:37
> To: WebAIM Discussion List < = EMAIL ADDRESS 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
>

From: Robert Fentress
Date: Wed, Oct 04 2017 8:26AM
Subject: Re: link color that meets contrast requirements relative to bg and surrounding text?
← Previous message | Next message →

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

On Wed, Oct 4, 2017 at 9:43 AM, Joe Chidzik < = EMAIL ADDRESS 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 ADDRESS REMOVED = ]
> > On Behalf Of Robert Fentress
> > Sent: 04 October 2017 14:37
> > To: WebAIM Discussion List < = EMAIL ADDRESS 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>

From: Karl Brown
Date: Wed, Oct 04 2017 9:18AM
Subject: Re: link color that meets contrast requirements relative to bg and surrounding text?
← Previous message | Next message →

Would they be averse to switching the background and foreground colours on
the links?

On Wed, Oct 4, 2017 at 3:26 PM, Robert Fentress < = EMAIL ADDRESS REMOVED = > wrote:

> Thanks, Joe. Maybe they would be more receptive to bolding. Good idea!
>
> On Wed, Oct 4, 2017 at 9:43 AM, Joe Chidzik < = EMAIL ADDRESS 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 ADDRESS REMOVED = ]
> > > On Behalf Of Robert Fentress
> > > Sent: 04 October 2017 14:37
> > > To: WebAIM Discussion List < = EMAIL ADDRESS 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>
> > > > >



--
Karl Brown
Twitter: @kbdevelops
Skype: kbdevelopment

Professional Certificate Web Accessibility Compliance (Distinction),
University of South Australia, 2015

From: Angela French
Date: Wed, Oct 04 2017 9:28AM
Subject: Re: link color that meets contrast requirements relative to bg and surrounding text?
← Previous message | Next message →

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 ADDRESS REMOVED = ] On Behalf Of Robert Fentress
Sent: Wednesday, October 04, 2017 6:37 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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>

From: Robert Fentress
Date: Wed, Oct 04 2017 10:06AM
Subject: Re: link color that meets contrast requirements relative to bg and surrounding text?
← Previous message | No next message

Nope. Don't think that would work in the relevant context.

On Wed, Oct 4, 2017 at 11:18 AM, Karl Brown < = EMAIL ADDRESS REMOVED = > wrote:

> Would they be averse to switching the background and foreground colours on
> the links?
>
> On Wed, Oct 4, 2017 at 3:26 PM, Robert Fentress < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Thanks, Joe. Maybe they would be more receptive to bolding. Good idea!
> >
> > On Wed, Oct 4, 2017 at 9:43 AM, Joe Chidzik <
> = EMAIL ADDRESS 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 ADDRESS REMOVED = ]
> > > > On Behalf Of Robert Fentress
> > > > Sent: 04 October 2017 14:37
> > > > To: WebAIM Discussion List < = EMAIL ADDRESS 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>
> > > > > > > > > >
>
>
>
> --
> Karl Brown
> Twitter: @kbdevelops
> Skype: kbdevelopment
>
> Professional Certificate Web Accessibility Compliance (Distinction),
> University of South Australia, 2015
> > > > >



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