Colorblindness – A Usability Guide for Commercial Applications, Part 1

Ten percent of Caucasian American men but less than one percent of women are estimated to have some form of colorblindness. Colorblind people represent a significant but often neglected talent pool and consumer segment. Identifying opportunities to make products usable by as many people as possible, without degrading overall quality or performance, is a quality assurance function that is not always well understood or practiced.

Here is a guide for increasing the usability of products and the communication of information. It contains need-to-know information for anyone engaged in software and hardware product design, quality assurance or business communication. We begin with a few simple tips.

Two principal tips for usability are to avoid using color alone as a sole distinguishing element or functional indicator, and to emphasize highly contrasting brightness, hues and saturations in adjacent colors. In emphasizing a hyperlink, for example, not only can a dark blue font be used against a white background, but the hyperlink can be underlined to indicate its function.

Avoid using colors together that are distinguishable solely by the amount of red or green in them.

In presenting text, colored letters work best when they are in bold fonts and have high-contrast backgrounds. The easiest text to read is in strong black fonts on white backgrounds. Dark fonts and busy or dark backgrounds do not work well together, nor do light fonts on light backgrounds. Avoid yellow or light green letters on white backgrounds.

Information should never be distinguished by color only, but should be combined with bolder fonts, underlining, dashes, italics, or other typographical features. This is particularly important when information is being presented in graphs and maps.

Graphs and Maps

In creating graphs or maps, do not rely on a separate color-coded key outside of the map or graph. It is hard for colorblind people to compare colors that are not immediately adjacent. Instead, distinguish information by labeling lines and other features with text or arrows extending inside the graph or map itself.

In maps and graphs, information can be distinguished by letter and number codes, stripes, hatching (cross hatching, stripes, dotted fill lines), triangles, rectangles and other shapes.

For example, one trend line in a graph could be marked off with little squares every time the line changes course, whereas a nearby line could be distinguished by the use of dotted lines and the occasional triangle. A third line could be thicker than the first two. Color codes can still be used, but there should be labeling (without an exclusive reliance on color coding) inside the graphic itself.

Rather than using red in photos and other graphics, try purple (magenta), which has equal portions of red and blue. A red-green colorblind person will not see the red, but should be able to see the blue. Keep purple away from a blue or black background.

Clearer Presentations

In a North American audience of 250 people that is made up equally of men and women, there will be an average of 10 colorblind people. How can presentations be made that are equally comprehensible by everyone in the audience?

When presenting graphics in PowerPoint or other slideshow presentation software, avoid referring to information solely on the basis of color. For example, instead of saying: “the green box indicates ____,” say “the second box on the left indicates ____.”

When using a laser pointer in making a presentation, remember that colorblind people have trouble seeing light from red laser pointers. Light from green laser pointers is easier to see and appears as a white light to many colorblind people.

Red-Green Colorblindness Can Extend to Blues

The most common form of colorblindness involves difficulty distinguishing red and green colors. Eight percent of Caucasian men reportedly have red-green colorblindness, with an additional two percent having more extensive colorblindness. Five percent of Asian men and four percent of African men have red-green colorblindness. If you present a project deliverable to three Caucasian males, there is a 22 percent chance that one of the recipients will be colorblind.

Red colorblindness means that red does not appear as a bright or vivid color. During the day, a red traffic light, for example, may appear to be broken or unlit to colorblind drivers. Red-green colorblindness can make it hard to identify green traffic lights at night and for colorblind drivers to distinguish green traffic lights from white street lamps.

The impact of red-green colorblindness can be under-recognized. Since red and green are components of many other colors, red and green colorblindness frequently affects the capability to recognize a wide range of colors, especially blues. A colorblind person may be able to identify a color as having blue in it and may be sensitive to subtle distinctions in bluish hues, but will not be able to identify the exact color of blue.

The easiest type of red for most colorblind people to see is vermilion. For greens, bluish green is the easiest to see.

High Contrasts Work Best

The safest route to legibility in screen and print layouts is to rely on black fonts and white backgrounds. To place blue or green backgrounds behind black fonts decreases the contrast and degrades readability. The use of red or dark green backgrounds also degrades readability, regardless of font color.

Avoid the mistakes that Chevrolet has been making in its recent billboard and print ads, where it intersperses black and red fonts and uses red fonts on top of dark backgrounds. My last three vehicles have all been Chevrolets. I take pride in my Chevrolet and enjoy seeing Chevrolet ads, but when these ads are unreadable it leaves the impression that Chevrolet doesn’t care about its customers.

All the major search engines are making mistakes when it comes to maximizing the readability of their sites, including the color schemes chosen for displaying search engine ads. One of the principal mistakes involves the use of light blue and gray colors. Others include the choice of reds.

A9 is the most readable of the major search engines. A9 is powered by Microsoft Windows Live search, which at its own site is the least readable for colorblind people.

The use of light blue and gray colors, regardless of background, degrades usability and increases eye strain for many colorblind viewers, as with the standard color scheme of the Mozilla Firefox browser. The use of red and green colors on black backgrounds creates images that are difficult or impossible for many colorblind people to distinguish.

In Firefox, there is a high contrast, dark skin or “browser theme” called Pitch Dark that would be attractive for colorblind people, except for the fact that most of the icons have red or green in them, which renders them wholly or partially invisible against the browser skin’s black background. One trick that colorblind people use in these situations is to memorize the positions of icons and to navigate online from memory.

Designing Forms

The design of online forms customarily includes tools for identifying entries that have not been filled in correctly. The use of red fonts is a common tool for directing someone back to portions of a form where data needs to be entered correctly before it can be submitted.

Even mildly colorblind people can find it impossible to distinguish red letters from black ones, and so will be unable to complete some forms properly or without experiencing delays, frustration and possibly total failure to complete the form’s submission process.

Changing a font’s color from black to red as the sole means of directing users to correct data entry errors has been a distinguishing feature of the online recruiting software used by Norman Broadbent, a member of the TranSearch International global recruiting partnership. With the costs of attracting qualified job applicants frequently exceeding thousands of dollars, discriminating against a small pool of otherwise qualified applicants can have significant financial consequences — both for the clients of recruiting firms and for applicants who are adversely affected by discrimination.

It should be a source of embarrassment to be found to be arbitrarily creating bars to employment for a class of applicants who would otherwise perform properly. Rather than blame TranSearch International, I would suggest that primary responsibility for eliminating arbitrary discrimination rests with clients that use hiring systems with forms that cannot reasonably be completed by colorblind individuals.Colorblindness – A Usability Guide for Commercial Applications, Part 2