WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color Contrast Workaround?

for

From: Jesse Hausler
Date: Sep 19, 2014 3:54PM

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 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 REMOVED> [mailto:
> <EMAIL 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 REMOVED>
> > > >