There are several good color contrast analysis tools available. I’ve come to heavily depend upon some of them for analyzing text, but they all lack some functionality that I find I’m needing. I would like to be able to
- analyze text within images, and
- analyze text over top of background images or gradients.
To solve these problems I’ve developed a Chrome extension called the Color Contrast Analyzer for Chrome and it is now free to download in the Chrome Store. The tool analyzes screenshots of Web pages to determine, pixel-by-pixel, where the color contrast changes enough to pass a given WCAG 2 conformance level. You can choose to analyze a portion of a page, the visible portion of the page, or the entire webpage. The end result is a mask that shows outlines of all of the elements that pass the conformance level. This isn’t a tool to replace the functionality of all of the other color contrast tools I that I use – it is to compliment them.
Here is an example of a page that has a set of menus that does not have enough contrast along with the results the Color Contrast Analyzer produces.
Because the menus are not outlined, that means they don’t have enough contrast to meet the given conformance level.
Because this tool examines a page pixel-by-pixel, it can analyze text over top of background images. Here is an example of some text placed over an image along with the results, showing the text does have sufficient contrast over top of the image.
It also works for text over gradients. This is an example of where the gradient eventually transitions to a color that does not provide enough contrast.
In addition to analyzing webpages, it can analyze almost any file that Chrome can open from your local computer. This includes JPEG, PNG, and PDF files. With PDF files you will be limited to analyzing the entire visible portion of the document as opposed to using the other selection tools.
It is important to remember that the WCAG 2 color contrast ratios only apply to text. Additionally, there are certain types of text that WCAG 2 makes exemptions for, like logos, inactive form elements, purely decorative text, or incidental text in photos. For not-text items like borders and other graphical elements, while these ratios can be helpful in determining if items have enough contrast, the WCAG 2 ratios do not address these types of elements.
For the record, here are the other color contrast tools I depend upon.