WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Color Contrast Workaround?

for

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

From: Jesse Hausler
Date: Fri, Sep 19 2014 3:25PM
Subject: Color Contrast Workaround?
No previous message | Next message →

Apologies if you've already gotten this message. I've tried posting it a
few times, but haven't gotten the confirmation email.. I've dropped the
image attachment, guessing that might be why.
***

I've been working with my design team to ensure that contrast for text and
icons all meet wcag color contrast standards. Together, we've all found
that 4.5:1 and even 3:1 (for large text) is very limiting from a design
standpoint. They are on the verge of forcing me down the path of a "high
contrast mode", something I am desperately trying to avoid.

While i've stood firm on the need to meet this standard, I've pushed the
design team to explore new and creative ways to work within the guideline.

They came to me with an example of a white icon against a light orange
background. It's an icon font, so i consider it text. On it's own, this
combination fails. However, in this case we added a 1px border around the
icon with a darker orange that does pass when paired with white.

Two questions.. Is this legit as far as WCAG goes? How would this technique
would work for users who benefit from higher contrast ratios?

Technically, I think it should meet the standard as the white is touching a
color that meets contrast ratios.

Thanks,
Jesse

From: Jonathan Avila
Date: Fri, Sep 19 2014 3:36PM
Subject: Re: Color Contrast Workaround?
← Previous message | Next message →

> However, in this case we added a 1px border around the icon with a darker orange that does pass when paired with white. Two questions.. Is this legit as far as WCAG goes? How would this technique would work for users who benefit from higher contrast ratios?

I consider a halo that adds sufficient contrast completely around the text to pass the success criteria. I would imagine a halo of only 1px wide would meet the requirement.

On an interesting related note VoiceOver on iOS adds a double border (one white and one black) as the focus rectangle. This solution has the effect of always providing a focus rectangle that meets the contrast requirements no matter where it is. So might help your team in solving other visual indicator of focus issues.

Jonathan

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jesse Hausler
Sent: Friday, September 19, 2014 5:25 PM
To: WebAIM Discussion List
Subject: [WebAIM] Color Contrast Workaround?

Apologies if you've already gotten this message. I've tried posting it a few times, but haven't gotten the confirmation email.. I've dropped the image attachment, guessing that might be why.
***

I've been working with my design team to ensure that contrast for text and icons all meet wcag color contrast standards. Together, we've all found that 4.5:1 and even 3:1 (for large text) is very limiting from a design standpoint. They are on the verge of forcing me down the path of a "high contrast mode", something I am desperately trying to avoid.

While i've stood firm on the need to meet this standard, I've pushed the design team to explore new and creative ways to work within the guideline.

They came to me with an example of a white icon against a light orange background. It's an icon font, so i consider it text. On it's own, this combination fails. However, in this case we added a 1px border around the icon with a darker orange that does pass when paired with white.

Two questions.. Is this legit as far as WCAG goes? How would this technique would work for users who benefit from higher contrast ratios?

Technically, I think it should meet the standard as the white is touching a color that meets contrast ratios.

Thanks,
Jesse

From: Jesse Hausler
Date: Fri, Sep 19 2014 3:54PM
Subject: Re: Color Contrast Workaround?
← Previous message | Next message →

Thanks Jonathan. That is interesting about the focus rectangle. I've been
shown some pretty hard to read "focus states". While I don't believe there
is a WCAG guideline setting a hard rule for ratios regarding indicating
focus, I'll usually tell a designer who shows me a gray border, wrapping a
gray tab to go back to the white board.

Back to text contrast ratios: When it comes to AT, it's difficult to tell a
design executive who shows me the Darken Colors setting on an iPhone that
as cool as it is... it doesn't offset the 4.5:1 standard in the WCAG. Glad
to hear at least one opinion that the halo is a legit solution.

Jesse



On Fri, Sep 19, 2014 at 2:36 PM, Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:

> > However, in this case we added a 1px border around the icon with a
> darker orange that does pass when paired with white. Two questions.. Is
> this legit as far as WCAG goes? How would this technique would work for
> users who benefit from higher contrast ratios?
>
> I consider a halo that adds sufficient contrast completely around the text
> to pass the success criteria. I would imagine a halo of only 1px wide
> would meet the requirement.
>
> On an interesting related note VoiceOver on iOS adds a double border (one
> white and one black) as the focus rectangle. This solution has the effect
> of always providing a focus rectangle that meets the contrast requirements
> no matter where it is. So might help your team in solving other visual
> indicator of focus issues.
>
> Jonathan
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto:
> = EMAIL ADDRESS REMOVED = ] On Behalf Of Jesse Hausler
> Sent: Friday, September 19, 2014 5:25 PM
> To: WebAIM Discussion List
> Subject: [WebAIM] Color Contrast Workaround?
>
> Apologies if you've already gotten this message. I've tried posting it a
> few times, but haven't gotten the confirmation email.. I've dropped the
> image attachment, guessing that might be why.
> ***
>
> I've been working with my design team to ensure that contrast for text and
> icons all meet wcag color contrast standards. Together, we've all found
> that 4.5:1 and even 3:1 (for large text) is very limiting from a design
> standpoint. They are on the verge of forcing me down the path of a "high
> contrast mode", something I am desperately trying to avoid.
>
> While i've stood firm on the need to meet this standard, I've pushed the
> design team to explore new and creative ways to work within the guideline.
>
> They came to me with an example of a white icon against a light orange
> background. It's an icon font, so i consider it text. On it's own, this
> combination fails. However, in this case we added a 1px border around the
> icon with a darker orange that does pass when paired with white.
>
> Two questions.. Is this legit as far as WCAG goes? How would this
> technique would work for users who benefit from higher contrast ratios?
>
> Technically, I think it should meet the standard as the white is touching
> a color that meets contrast ratios.
>
> Thanks,
> Jesse
> > > messages to = EMAIL ADDRESS REMOVED =
> > > >

From: Mallory van Achterberg
Date: Fri, Sep 19 2014 4:23PM
Subject: Re: Color Contrast Workaround?
← Previous message | Next message →

On Fri, Sep 19, 2014 at 02:54:53PM -0700, Jesse Hausler wrote:
> Back to text contrast ratios: When it comes to AT, it's difficult to tell a
> design executive who shows me the Darken Colors setting on an iPhone that
> as cool as it is... it doesn't offset the 4.5:1 standard in the WCAG.

Show it to the executive... in the sun.

_mallory

From: Jesse Hausler
Date: Fri, Sep 19 2014 4:15PM
Subject: Re: Color Contrast Workaround?
← Previous message | Next message →

In the sun, I don't believe there would be any difference between showing a
text combination that was 4.5:1 out of the box vs showing 4:1 that got
bumped to 4.5:1 using iOS's "Darken Colors" setting.

The executives I am working with are very supportive of accessibility, and
we are working together to discuss all possible solutions for our users.
I'm trying to find out where the boundary for this guideline exists.

Section 508 had some leeway when it came to color combinations with
1194.21(b), essentially asking that applications respect user settings.
WCAG is much more strict requiring 4.5:1, regardless of increased access
to, as well as improvements in contrast enhancing AT.

Thanks again,
Jesse

On Fri, Sep 19, 2014 at 3:23 PM, Mallory van Achterberg <
= EMAIL ADDRESS REMOVED = > wrote:

> On Fri, Sep 19, 2014 at 02:54:53PM -0700, Jesse Hausler wrote:
> > Back to text contrast ratios: When it comes to AT, it's difficult to
> tell a
> > design executive who shows me the Darken Colors setting on an iPhone that
> > as cool as it is... it doesn't offset the 4.5:1 standard in the WCAG.
>
> Show it to the executive... in the sun.
>
> _mallory
> > > >

From: Ryan E. Benson
Date: Fri, Sep 19 2014 4:26PM
Subject: Re: Color Contrast Workaround?
← Previous message | Next message →

>Section 508 had some leeway when it came to color combinations with
1194.21(b), essentially asking that applications respect user settings.

you should be looking at 1194.22(c) for this not .21, unless you are
creating a software application

--
Ryan E. Benson

On Fri, Sep 19, 2014 at 6:15 PM, Jesse Hausler < = EMAIL ADDRESS REMOVED = >
wrote:

> In the sun, I don't believe there would be any difference between showing a
> text combination that was 4.5:1 out of the box vs showing 4:1 that got
> bumped to 4.5:1 using iOS's "Darken Colors" setting.
>
> The executives I am working with are very supportive of accessibility, and
> we are working together to discuss all possible solutions for our users.
> I'm trying to find out where the boundary for this guideline exists.
>
> Section 508 had some leeway when it came to color combinations with
> 1194.21(b), essentially asking that applications respect user settings.
> WCAG is much more strict requiring 4.5:1, regardless of increased access
> to, as well as improvements in contrast enhancing AT.
>
> Thanks again,
> Jesse
>
> On Fri, Sep 19, 2014 at 3:23 PM, Mallory van Achterberg <
> = EMAIL ADDRESS REMOVED = > wrote:
>
> > On Fri, Sep 19, 2014 at 02:54:53PM -0700, Jesse Hausler wrote:
> > > Back to text contrast ratios: When it comes to AT, it's difficult to
> > tell a
> > > design executive who shows me the Darken Colors setting on an iPhone
> that
> > > as cool as it is... it doesn't offset the 4.5:1 standard in the WCAG.
> >
> > Show it to the executive... in the sun.
> >
> > _mallory
> > > > > > > >
> > > >

From: Jonathan Avila
Date: Fri, Sep 19 2014 4:34PM
Subject: Re: Color Contrast Workaround?
← Previous message | Next message →

> >Section 508 had some leeway when it came to color combinations with
1194.21(b), essentially asking that applications respect user settings.

At this point many Federal agencies are testing for/requiring contrast requirements from WCAG 2 Level AA. The baseline recommended by the CIO Council's accessibility committee has included this contrast requirement and the Section 508 refresh will almost certainly be going this route hopefully in addition to requiring operating system control over display options. Agencies have always had the ability to define procurement requirements around Section 508 -- getting them to be consistent and transparent, however, has been a challenge.

Jonathan

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Ryan E. Benson
Sent: Friday, September 19, 2014 6:27 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Color Contrast Workaround?

>Section 508 had some leeway when it came to color combinations with
1194.21(b), essentially asking that applications respect user settings.

you should be looking at 1194.22(c) for this not .21, unless you are creating a software application

--
Ryan E. Benson

On Fri, Sep 19, 2014 at 6:15 PM, Jesse Hausler < = EMAIL ADDRESS REMOVED = >
wrote:

> In the sun, I don't believe there would be any difference between
> showing a text combination that was 4.5:1 out of the box vs showing
> 4:1 that got bumped to 4.5:1 using iOS's "Darken Colors" setting.
>
> The executives I am working with are very supportive of accessibility,
> and we are working together to discuss all possible solutions for our users.
> I'm trying to find out where the boundary for this guideline exists.
>
> Section 508 had some leeway when it came to color combinations with
> 1194.21(b), essentially asking that applications respect user settings.
> WCAG is much more strict requiring 4.5:1, regardless of increased
> access to, as well as improvements in contrast enhancing AT.
>
> Thanks again,
> Jesse
>
> On Fri, Sep 19, 2014 at 3:23 PM, Mallory van Achterberg <
> = EMAIL ADDRESS REMOVED = > wrote:
>
> > On Fri, Sep 19, 2014 at 02:54:53PM -0700, Jesse Hausler wrote:
> > > Back to text contrast ratios: When it comes to AT, it's difficult
> > > to
> > tell a
> > > design executive who shows me the Darken Colors setting on an
> > > iPhone
> that
> > > as cool as it is... it doesn't offset the 4.5:1 standard in the WCAG.
> >
> > Show it to the executive... in the sun.
> >
> > _mallory
> > > > > > list messages to = EMAIL ADDRESS REMOVED =
> >
> > > list messages to = EMAIL ADDRESS REMOVED =
>

From: Jesse Hausler
Date: Mon, Sep 22 2014 1:39PM
Subject: Re: Color Contrast Workaround?
← Previous message | No next message

Hi Ryan, Thanks for your comment. 22(c) more or less proves my point that
Section 508 doesn't have any hard requirements for color contrast ratios.
I agree with you about .21 and have long held the belief that it only
applies to thick clients. In recent years though I've had conversations
with people from many top a11y consultancies, and most (if not all?) treat
web "applications" like CRM as a .21 Software Application. It's really the
best way to cover keyboard access in a world complete with modals, hovers,
panels, menus and tabset components.

Jonathan, i've definitely seen Federal agencies flag contrast failures as
508 issues. I'm not sure what standard they're using (.31?), but I along
with the rest of us are waiting for WCAG-AA to finally become the new
Section 508. It will make things much simpler.

Since no one else has had any comment on using a dark 1px border on icons
and text.. i'll go with your initial thoughts that's a legit solution. :)

Take care everyone.
Jesse



On Fri, Sep 19, 2014 at 6:34 PM, Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:

> > >Section 508 had some leeway when it came to color combinations with
> 1194.21(b), essentially asking that applications respect user settings.
>
> At this point many Federal agencies are testing for/requiring contrast
> requirements from WCAG 2 Level AA. The baseline recommended by the CIO
> Council's accessibility committee has included this contrast requirement
> and the Section 508 refresh will almost certainly be going this route
> hopefully in addition to requiring operating system control over display
> options. Agencies have always had the ability to define procurement
> requirements around Section 508 -- getting them to be consistent and
> transparent, however, has been a challenge.
>
> Jonathan
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto:
> = EMAIL ADDRESS REMOVED = ] On Behalf Of Ryan E. Benson
> Sent: Friday, September 19, 2014 6:27 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Color Contrast Workaround?
>
> >Section 508 had some leeway when it came to color combinations with
> 1194.21(b), essentially asking that applications respect user settings.
>
> you should be looking at 1194.22(c) for this not .21, unless you are
> creating a software application
>
> --
> Ryan E. Benson
>
> On Fri, Sep 19, 2014 at 6:15 PM, Jesse Hausler < = EMAIL ADDRESS REMOVED = >
> wrote:
>
> > In the sun, I don't believe there would be any difference between
> > showing a text combination that was 4.5:1 out of the box vs showing
> > 4:1 that got bumped to 4.5:1 using iOS's "Darken Colors" setting.
> >
> > The executives I am working with are very supportive of accessibility,
> > and we are working together to discuss all possible solutions for our
> users.
> > I'm trying to find out where the boundary for this guideline exists.
> >
> > Section 508 had some leeway when it came to color combinations with
> > 1194.21(b), essentially asking that applications respect user settings.
> > WCAG is much more strict requiring 4.5:1, regardless of increased
> > access to, as well as improvements in contrast enhancing AT.
> >
> > Thanks again,
> > Jesse
> >
> > On Fri, Sep 19, 2014 at 3:23 PM, Mallory van Achterberg <
> > = EMAIL ADDRESS REMOVED = > wrote:
> >
> > > On Fri, Sep 19, 2014 at 02:54:53PM -0700, Jesse Hausler wrote:
> > > > Back to text contrast ratios: When it comes to AT, it's difficult
> > > > to
> > > tell a
> > > > design executive who shows me the Darken Colors setting on an
> > > > iPhone
> > that
> > > > as cool as it is... it doesn't offset the 4.5:1 standard in the WCAG.
> > >
> > > Show it to the executive... in the sun.
> > >
> > > _mallory
> > > > > > > > > list messages to = EMAIL ADDRESS REMOVED =
> > >
> > > > > > list messages to = EMAIL ADDRESS REMOVED =
> >
> > > messages to = EMAIL ADDRESS REMOVED =
> > > >