WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color Contrast Workaround?

for

From: Jonathan Avila
Date: Sep 19, 2014 3:36PM

> 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