Color Contrast Analyzer for Chrome

This Chrome extension allows you to analyze text color contrast problems on a web page according to the WCAG 2 color contrast requirements. Download the Color Contrast Analyzer from the Google Chrome Store

Why use this tool?

  • Analyze text over top of background images or gradients
  • Analyze text in images
  • Get a visual overview of the contrast of your page

How to use the tool

  1. Go to the page to analyze.
  2. Choose to either analyze a section of the page, the visible portion of the page, or the entire page.
  3. Once the results page appears, adjust the WCAG level to evaluate a different conformance level or text size. In general,
    • For regular-sized text, choose WCAG AA, Small Non-Bold (4.5:1). This is for text smaller than 18pt. or approximately 1.5em.
    • For larger text, like headings, choose WCAG AA, Medium-Bold and Large Non-Bold Text (3:1). This is for bold text larger than 14pt or non-bold text larger than 18pt, or approximately 1.2em and 1.5 em, respectively.
  4. Also, you can adjust the pixel analysis radius to better handle anti-aliasing of text where the transition from one color to another is more gradual. Note, increasing the pixel radius will increase the computation time.
  5. Text which passes the given conformance level will be outlined in white.
  6. Toggle the mask on and off to see what elements on the underlying page lack enough contrast.

Things to keep in mind when using this tool

  • The WCAG conformance levels only apply to text, not to other UI elements.
  • You must understand the size of the text you are trying to analyze, because it matters which WCAG criteria you choose.

Tips and Tricks

  • Almost any type of file you can open in Chrome, including image and PDF files, can be evaluated for text color contrast too. For PDF files you will only be able to evaluate the visible portion of the PDF. To analyze local files you will need to go to your Extensions page and check “Allow access to file URLs” for this extension.
  • When first installing the extension, you may need to refresh the webpage you wish to analyze for all of the selection options to be available.

Note, when installing the extension it will ask you for permission to access your data on all of your websites and your tabs and browsing activity. We are not using or collecting this data in any way. In order to get permission to take screenshots of your browser window this is the level of access we must request. You can view the source code for the project.