Accessibility icon

Color Contrast Testing for Web Accessibility, FTW!

Catharine McNally, Associate Product Manager
#Accessibility | Posted

Around the world, more than 285 million people are estimated to be visually impaired and need some accommodation in the way they interact with content on the web. If you fail to think about these potential visitors, chances are you are alienating a part of your audience. Thinking about color contrast is a great and easy way to make sure that your site is accessible to all of your visitors.

Trust me on this one. The tota11y accessibility visualization toolkit supported by the Khan Academy is by far the most effective, informative, and intuitive color contrast testing tool that I have used to date. A simple download of a chrome plug-in and I’m good to go. It’s also available as a Drupal Module. (++ major karma points there!). Try out the Demo here for a quick spin.

Recently I was tasked with reviewing color contrast of a site, so I loaded in some test content and activated the tota11y plugin.

Screenshot of Tota11y Plugin in the bottom of a browser window

 

 I selected “Color Contrast”.

And not only were the “pass/fail” criteria(s) delivered to me, on-screen, and at the site of failure, but also recommendations on how to bring it to compliance.

 

Screenshot of Tota11y Tool contrast failures that demonstrate remediation suggestions

 

I no longer have to tell a designer or front-end developer, “This site element failed this color contrast combination, so good luck finding a combination that works.”

Rather, this tool allows for a more informed conversation with designers and developers. Now I can say, “This combination with #B5B5B5 failed color contrast ratio, but there’s the suggested value of using #767676 instead. Would that work?”

Have any of you tried this tool out? Let us know what you think @phase2, especially if you have used it for headings, links, color contrast, & landmarks! And to learn more about improving your website accessibility, download our Accessibility Playbook here.

Catharine McNally

Catharine McNally

Associate Product Manager