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 Chrome browser
WebAim Online Color Contrast Analyzer
Analyze text color contrast on a webpage or opened image file according to the WCAG 2 text color contrast requirements.

Web Content Accessibility Guidelines (WCAG) 2.0 Excerpt

"1.4.3 CONTRAST...
...The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

LARGE TEXT: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

INCIDENTAL: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

LOGOTYPES: Text that is part of a logo or brand name has no minimum contrast requirement."

For more detailed information, visit W3C Web Accessibility Initiative, How to Meet WCAG 2.0