WebAIM - Web Accessibility In Mind

E-mail List Archives

Color Contrast Workaround?

for

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

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