Contrast Ratio

Color Accessible Web Design Tools

Most graphics designers have excellent eye sight, at least with focus correction, and assume that viewers of their creations do also. A layout might start with theme colors selected from a color circle according to mono, triad, tetrad theories, with block dimensions following the classic golden ratio. Modern computer monitors can handle over 167 million colors, far beyond any printer.

However, an estimated 9 to 13 percent of males and under one percent of female population have some form of color blindness. Ouch!

A web search found these definitions for color blindness, compared to statistically normal eyes. Protanopia means difficulties to distinguish between blue and green colors and also between red and green colors, or no sensitivity to red. Deuteranopia is blindness to green. Tritanopia is blindness to blue-yellow.

Fortunately the World Wide Web Consortium (W3C.com) has included color Contrast Ratio algorithm in their guidelines, and free tools are available to measure the contrast ratios between colors for the main descriptions of color blindness. One such, Colour Contrast Analyser Version 2.0 ("CCA"), can be downloaded from http://www.paciellogroup.com/resources/contrast-analyser.html

Note that black text on white background, or the reverse, has a ratio above 20 for all 4 eye conditions, and 21 seems to be the maximum. On the other end, a ratio of 1 means a problem.

Also note that color combinations selected by a young-ish designer of fantasy video games might be decipherable by a senior citizen, but require more effort than the viewer is willing to invest.

Here are some examples of contrast ratios measured with CCA. The tool accepts inputs in hexadecimal or color slider positions. On this tool, black & white have the greatest Contrast Ratio of 21 for normal eyes and 20.9 for protanopia, deuteranopia, tritanopia. The "primary" (RGB) colors on white range from 1.4 (green) to 20.4 (blue). RGB on black range from 1 (blue) to 15.3 (green). Thus Green on White and Blue on Black are terrible choices.

If you want to see what a web page looks like to color impaired people, enter the URL at http://colorfilter.wickline.org.

It seems that a minimum Contrast Ratio of 4 is a good target, so "RGB" is not safe. The combinations used for text on http://WriteAid.us provide contrast ratios from 4.5 to 20.9.

Web designers who ignore color blindness can lose or confuse about 10 percent of potential viewers. The extra effort to avoid this problem is not great.