Testing Color for Accessibility

June 20, 2013 Cameron Cundiff

A fellow Pivot recently asked me about accessibility requirements around the use color with text in a page. Here is the answer I gave her.
Color itself is not as relevant as contrast ratio (for color blindness in particular). The contrast ratio rule is (according to WCAG 2) 4.5:1 for body text and 3:1 for large scale (minimum 14 pt bold weight or 18 pt normal).
A useful tool to check this is the HTML Codesniffer bookmarklet. You can run it in the browser to check for acceptable contrast. There is also a phantomjs runner for Codesniffer that you can use on the command line. The command line runner is especially exciting for its potential in automated accessibility testing.

About the Author

Biography

More Content by Cameron Cundiff
Previous
The Pivotal Tracker Rewrite, And Improved Story Linking
The Pivotal Tracker Rewrite, And Improved Story Linking

If you’re a long time Pivotal Tracker user, you’ve probably noticed that for the last year or so, things ha...

Next
Implementing the Flat Design of iOS 7
Implementing the Flat Design of iOS 7

There has been much talk of the so-called “flat” design of Jony Ive’s group. iOS 7 is anything but flat. L...

Enter curious. Exit smarter.

Register Now