Skip to main content

David Mead

Be aware of false positives when using #a11y contrast ratio plugins...

2 min read

I know you everyone knows this, but just in case you don't here's a pro-tip.

When using a contrast ratio plugin with Sketch (or other design tools) make sure the text layer is set to 100% opacity. Why? Because if you don't, you may get a false positive result.

screenshot showing 14px black text on gray background passing AAA level from WCAG

Here's some 14px Rubik type using #000000 (black) on a background of #D8D8D8 (gray). We get a nice 'AAA' pass when testing against the WCAG.

But if I take the text layers opacity down to 20%, what do you think happens?

screenshot showing 14px light gray text on gray background passing AAA level from WCAG

I still get the same passing grade. I assume this is because the checker still knows this is solid black text, but has no insight to the opacity of the layer.

Visually the text is the same color as #ACACAC (light gray) which would fail the contrast check.

screenshot showing 14px light gray text on gray background failing WCAG contrast check

When running your design through a checker, just make sure someone (because of course you wouldn't) has not changed the text color by adjusting a layers opacity instad of choosing a specific color.

The two plugins I use for Sketch are:

and they both seem to bring back these passes when the layers opacity are changed.Β 

David Mead

Big thanks to @brucel, @LeonieWatson, and @smashingmag for making this excellent video free available for all. Great resource!
https://youtu.be/OUDV1gqs9GA

David Mead

@jrAccessibility will be going over the basics of , issues online, and tonight. More at https://www.meetup.com/Cleveland-Accessibility-Meetup/events/257287270/
/via @a11yCLE