Accessibility Tools for Quality Assurance: Color Contrast
Accessibility testing tools are great for quality assurance (QA), even when the website doesn’t have to be accessible. For example, color contrast is a very subjective thing. It depends on technical factors like the quality and settings of the screen, environmental factors like glaring sunlight, and the physical abilities of the person viewing it. It’s literally subjective in the eye of the designer.
In contrast, color contrast analyzers use algorithms from the Web Content Accessibility Guidelines (WCAG) to obtain verifiable, objective results for luminosity, brightness and contrast. Those results give us an impression how fore- and background colors are perceivable by other people.
An example
Visiting the iTunes store we can say subjectively that the light gray text on a dark gray background is somehow hard to read. It’s straining, and possibly that’s not only due to the small font size:
If we check it with a color contrast analyzer, we get results like these:
The luminosity contrast ratio is sufficient with 5.37, the difference in brightness only just fails with 116 (125 being the lower limit), and the difference in color is insufficient with a result of 348 (the lower limit is 500).
So it’s not us getting old — the color values are indeed poorly chosen!
Downloads and links
There are various tools to test color contrast:
- Firefox Add-Ons: Colour Contrast Analyser and Juicy Studio Accessibility Toolbar
- Internet Explorer: Web Accessibility Toolbar 2.0 (WAT)
- Opera: Web Accessibility Toolbar 1.1
- Colour Contrast Analyser 2.2 as standalone software for Windows or Mac OS
As web application:
This entry is filed under accessibility, design, web development, web standards. It is licensed under a Creative Commons Attribution-Share Alike 3.0 License.
I think that using colour contrast for quality assurance is a great idea. As an accessibility specialist I use the vision Australia tool. I have low vision which is very colour contrast sensitive. I can therefore vouch for the value of such tools, which generally coincide with my personal judgement about what works and what doesn’t, and also for the benefits of paying attention to good colour contrast. My often frustrating experience with poor colour contrast is recorded on my accessibility blog.