Color Blindness and Usability on the Web.

by Bonnie Dalzell, 2012

Roughly 7% to 10% of the visitors to your web pages have some degree of color vision deficiencies. There are a number of useful websites that help you to understand how to design pages that will be useful to these visitors. The commonest form is Red‐green color blindness which is due to X‐linked recessive inheritance. There are a number of distinct variances termed: protanopia, deuteranopia, protanomaly, and deuteranomaly in which individuals have difficulty with discriminating red and green hues.

I strongly suggest reading the Wikipedia articles on color vision and color blindness as they are quite thorough.

This is a link to one list of such articles.

A general comment from the web design section of the Wikipedia article is that distinguishing blue and yellow are the most reliably distinguished colors so I have made link color dark‐yellow orange for this page and VISITED LINK color a dark blue.I have also made the links REVERSE color if the mouse hovers over them.

One of the most amazing on line resources is the Wickline‐color‐filter site where you can submit a web page and then view it as it might appear to a person with a color vision disability.

I became interested in this problem because my on line dog pedigree site features pedigrees in which each ancestor who occurs more than once in the pedigree has an individual unique background color. While I was improving my software, WebPed, I thought it would be simple to add color choices that would still allow the pedigrees to be useful to people with color vision deficiencies.

I think I have been able to select a set of colors that will suffice if there are no more than 30 unique duplicated dogs in the pedigree but I was unable to come up with more distinguishable colors than that. I have arranged my set of colors so that the most distinctive colors are used in the initial selection of duplicated dogs.

A Suggested Red‐Green Color Deficiency Safe Color Set

Primary Colors Other Colors
000000 9900FF
FFFFFF 990000
FF0000 FFCC66
00FF00 CC3366
0000FF FF6600
FFFF00 CC6633
00FFFF CC9900
FF00FF 9999CC
Dark Primary Colors FF99CC
660000 ADA990
006600 00CC33
000066 CCCC66
666600 CCCC99
006666 00CCFF
660066 CCFF66

This link is to a page that shows how a number of colors are transformed by different types of color blindness.colorfilter.4Sets.html