Tools

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.

NC State University Accessible Color Palette

At NC State we have an official color palette to help us in designing our Web sites. When selecting background and foreground colors from this palette, it’s not always obvious which combinations will provide enough contrast to be readable. WCAG 2, defines standards for how much contrast there should be between two colors on a page. It is recommended, and soon will be required, that all of your color combinations meet WCAG 2 Level AA conformance. This will become a requirement once Section 508 is updated and the Americans with Disabilities Act is amended. View the NC State University Color Palette Evaluator for WCAG Level AA. Click on any of the colors to analyze it with every other color combination in the palette.  A table will show you a sample of the color combinations and say which ones pass WCAG 2 Level AA accessibility standards.

Create a Color Palette Accessibility Evaluator

Create a tool that allows you to analyze any combination of colors from a palette to see which combinations meet WCAG 2 accessibility specifications.

Start by entering the colors in your palette.

List each color in the palette you would like to analyze, either one per line or in a comma-seperated list. Use the formulaRRGGBB, or the abbreviated RGB. For example, for green you would enter “00ff00” without the quotes. You must enter more than one color. It is also helpful to include black (000000 or 000) and white (ffffff or fff).

Choose the conformance level to use.

Conformance Level:

Please select which WCAG 2 conformance level you would like to use. Level AA is most likely going to become the new standard for Federal Web accessibility.


Click Submit then choose a color to analyze on the next page.

View a sample color palette already created

About This Tool

When designing a Web site it can be difficult to know when two colors have enough contrast between them to be readable. When just looking at two colors together it might seem that they are easily readable, but that is a very subjective measure and it will never guarantee that it is easily readable by others. WCAG 2 defines testable levels of color contrast to ensure that it is accessible to as many people as possible.

This tool will help designers determine which color combinations from a color palette work well together to ensure accessibility. With this tool, color choices can be made during the planning phase instead of patching an almost completed project.

For more information please read the blog post about the tool.

Color Extractor Bookmarklet

This is a tool that extracts all of the colors defined in the CSS of a given page and puts those colors in the Color Palette Accessibility Checker.

How to Use the Tool

  1. To get the tool, add the following link to your bookmarks: Color Extractor
    1. Note, you cannot simply click the above link to make the tool work. You must add the link to your bookmarks by either dragging it to your bookmarks menu or using your browser’s context menu to add it to the bookmarks menu.
  2. The bookmarklet will open the Color Palette Accessibility Checker in a new window.
    This tool is under active development. Any feedback you have is greatly appreciated. Please send comments to gdkraus@ncsu.edu.

Readability Bookmarklet

This tool will show you how readable selected text is on a page. The readability guidelines are based on WCAG 2 Level AAA Conformance. Note, there is no readability requirement for WCAG 2, Level AA Conformance. The results are based on six tests.

  • Flesch Reading Ease: 60 or higher is passing
  • Grade Level Equivalencies: 9th grade (15-16 years old) or less is passing
    • Flesch-Kincaid Grade Level
    • Gunning-Fog Grade Level
    • Automated Readability Index
    • Colemane-Liau Index
    • Simple Measure of Gobbledygook (SMOG) – This test is only valid for text passages with more than 30 sentences and will not be run on shorter passages.

Automatically assessing reading levels is not always a straight forward process. Proper names and titles do not count against the reading level, but creating a script that can handle those cases is difficult. This tool currently does not try to exclude proper names.

Additionally, Web pages often have lots of single word links, like menus, which can skew the results to indicate the main content is more readable than it really is. This tool works by allowing you to either

  • select particular text in a document to analyze
  • analyze an entire document

How to Use the Tool

  1. To get the tool, add the following link to your bookmarks: Readability
    • Note, you cannot simply click the above link to make the tool work. You must add the link to your bookmarks by either dragging it to your bookmarks menu or using your browser’s context menu to add it to the bookmarks menu.
  2. When you are viewing a Web page, either
    • with your cursor, select the text you would like to analyze, then activate the tool by selecting the link in your bookmark menu
    • to analyze the entire page, simply activate the tool by selecting the link in your bookmark menu
  3. The tool will tell you the readability levels according to the six different metrics.

Note, this tool will not work on Google Docs and may not work in other WYSISYG editors.

This tool is under active development. Once you install it, you will always get the latest changes to the tool every time you run it. Any feedback you have is greatly appreciated. Please send comments to greg_kraus@ncsu.edu.