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

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