In the United States, about 7 percent of the male population – or about 10.5 million men – and 0.4 percent of the female population either cannot distinguish red from green, or see red and green differently (Howard Hughes Medical Institute, 2006). And, more than 10% of the male population is color-blind in all over the world. There are various forms of color-blindness: red-green, green-brown, and so on. Of course, we cannot possibly avoid all of the colors that could be misinterpreted by all visitors with color vision impairment.
Nonetheless, it’s easy enough to make sure our pages are legible to anyone with color vision impairment. As already stated (repeatedly), there must be sufficient value contrast between the foreground and background colors such that the hue itself is irrelevant for legibility, as demonstrated below.
For instance, in this figure C and E would be legible to the same viewer, because the former uses different values (light versus dark), while the latter places both colors on a neutral background. Again, viewing your page in grayscale mode can show whether or not there is sufficient value contrast when the color information is removed.
In addition to paying attention to value differences, we should also make sure that color alone is never the only clue to meaning. For instance, traffic signals are still discernible to the color-impaired because the red and green lights are always in the same position. One area that we need to be particularly careful of is navigational links. If color is the only cue for distinguishing links from normal text, then colorblind visitors might not be able to distinguish links from normal text. Therefore, we need to make sure to use other affordances on the links as well, such as underline, boldface, or italics.