Contrast Checkers

Make sure you have good contrast between text and background.

Why Contrast Matters

Light text on a light background can be hard for anyone to read, as can dark text on a darker background. Students with conditions such as glaucoma and cataract may see the world through a haze that makes it even more difficult for them to read text that isn’t well separated from its background.

Sticking with black and white will give you the highest and safest contrast. But there is no reason to shy away from color—as long as you check that the colors you use contrast enough to meet accessibility standards. Unfortunately, the accessibility checker in Word for Windows does not check color contrast.

Pilot’s Color Contrast Checker

Pilot contrast checker

There are some great tools you can use to make sure you have good contrast. One is the color contrast checker built into Pilot. You’ll see it in most places where you can choose a color, such as when you style a widget or choose a color in the HTML editor. You’ll know you’re OK if you see a green check next to “WCAG AA.” A red X means your contrast is too low. A red triangle with an exclamation mark means you have enough contrast for large text, like headings, but not for regular paragraph text.

Colour Contrast Analyser

The following information describes version 1.0.0 of the Colour Contrast Analyser, as was available January 2019. Newer versions may not look exactly the same. Also, the eyedroppers in the current version may not work correctly if you have more than one monitor, such as an external monitor connected to a laptop.

The Paciello Group’s Colour Contrast Analyser 1 is a free application for Windows and Mac computers that will tell you if your text has enough contrast to meet WACG 2.0 2 standards.

With this tool, you can use an eyedropper tool to sample any color on your screen. Or you can enter by hand the numbers that define your colors.

Sample Colors with the Eyedropper

The Analyser has two eyedropper icons, one for your text, or foreground color, and one for the background color behind your text. Click an eyedropper, move the crosshairs over your color, and click again. The color will be transferred to the Analyser.

Enter Color Numbers by Hand

Sometimes, it’s more convenient to enter color values by hand instead of using the eyedropper. Most document editors, including MS Word, provide some way to get the values for a color you have selected. There are a variety of formats for color values, though. The Analyser supports Hex, Names, RGB, and HSL.

Analyser Results

Colour Contrast AnalyserThe Analyser displays pass/fail results for both “Large text” and “regular text.” A text size typically used for “regular” paragraphs needs more contrast than larger, heading-size text. 3  You only need to pass the AA level. In the picture above, this shade of blue text on a white background is OK for AA headings but doesn’t have enough contrast for regular text.

Browser Extensions for Checking Contrast

There are many free tools you can add to a browser to check accessibility issues, including color contrast. Unfortunately, the browser-based checkers only work on HTML pages, not on formats like Word, PDF, or PowerPoint. However, both of the checkers below allow you to enter color values by hand to check contrast. The WCAG Firefox extension lets you enter either hex or RGB values.

WAVE Extension for Google Chrome

A Swiss Army knife for Web accessibility, the WAVE Chrome extension 5 evaluates any Web page for many accessibility issues.

If you want to use the WAVE extension on an HTML page in your Pilot content area, you will first have to open the page out of Pilot’s frame and in the page’s own window. Another Chrome extension makes that possible. With the Open Frame installed, you can right click on a page and choose to pen that frame in a new window.

WCAG Contrast Checker for Firefox

The WCAG Contrast Checker extension 4 for Firefox can analyze a whole Web page at once. It will list all the text styles in a page with a red X or green check next to each. Click any one of them to highlight that text in the document. You can also use eyedroppers to sample colors in images on the page, much like the Paciello tool described above.

Notes

    1. Download the Paciello Group’s Colour Contrast Analyser from www.paciellogroup.com/resources/contrastanalyser
    1. WACG 2.0 refers to the latest Web Accessibility Content Guidelines, which are international standards from the World Wide Web Consortium.
    1. Large text is defined as at least 18 point text or at least 14 point bold text.
    1. Information about the WCAG Firefox extension is available at
      addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker
  1. Information about the WAVE Chrome Extension is available at wave.webaim.org/extension