Color Contrast Testing - Minnesota Dept. of Health

Color Contrast Testing

Text legibility is optimum when its color contrast is dramatic. Black on white or white on black reach the highest level of contrast. Some people with low vision require text to meet a certain contrast threshold in order to read our content adequately. MDH uses level AA criteria described in the Web Content Accessibility Guidelines (WCAG) 2.0. An excerpt is shown in the right sidebar here.

One method to determine if your text has sufficient contrast is to view your image using a Firefox or Chrome browser that has the Colorzilla add-on which will display the color of any pixel beneath the user's cursor. That color can then be entered into a contrast checker to see if the contrast ratio is 4.5:1 or more. Note that black is #000000 and white is #ffffff.

Tools for Color Contrast Testing for Accessibility

ColorZilla for Chrome browser    
ColorZilla for Firefox browser
With ColorZilla you can get a color reading from any point in your browser. Cut and paste it into a Color Contrast Analyzer.

Color Contrast Analyzer for Crome browser
WebAim Online Color Contrast Analyzter
Analyze text color contrast on a webpage or opened image file according to the WCAG 2 text color contrast requirements.

Updated Wednesday, May 31, 2017 at 04:55PM