Color Contrast Analyzer for Chrome: Text in Images, Gradients, PDFs and More

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.

screenshot of a web page where the menus do not have enough contrast but the rest of the page doesscreenshot of the results showing outlines around all of the items that have enough contrast but no outline around the menus

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.

screenshot of text written over top of an image

screenshot of the results of the analysis showing outlines of the text that meets the contrast requirements

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.
the text get help written in white over a color gradient that transitions from light gray to dark grayscreenshot of the analysis showing that the lower half of the text get help meets contrast requirements but the top half does not. The bottom half of the text is outlined but the top half is not.

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.

You can download the extension and read more instructions about using it. You can also watch the YouTube video demonstrating it.

For the record, here are the other color contrast tools I depend upon.

6 thoughts on “Color Contrast Analyzer for Chrome: Text in Images, Gradients, PDFs and More

  1. I’ve just tried the tool out – it seems like it’ll be handy with a simple tweak. Could the tool give more visual prominence to the failing text instead of the passing? On my heavy content pages, most things are passing. It takes a lot of attention to identify the dark areas that are failing.

    Cheers and thanks,
    Will

    • Thanks Will. I’ll have to think about that some to make sure it doesn’t generate too much noise on the other end of the spectrum, showing too many false positives. Since the algorithm is just doing image analysis it doesn’t really know if it’s text or not. Background colors, like a solid color, would produce lots of failures. Perhaps I could show areas of a page where the ratio is greater than 0 but less than the WCAG conformance level. That would at least handle the problem of a solid background.

    • Sounds good – if you end up doing more work on this I’d be glad to test it out with you. will {at} casecommons dot org.

      Cheers,
      Will

  2. Pingback: Web Accessibility » Text Color Contrast Tool

Comments are closed.