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