Color Universal Design (CUD)
- How to make figures and presentations that are friendly to Colorblind people -

11.20.2002 (modified on 2.15.2008, 9.24.2008)

NEW: Adobe Photoshop/Illustrator with colorblind proof functionality released.

Index

1. What is colorblind?
2. How colorblind people see colors？
3. Figures of fluorescent staining (microscope images and DNA chip)
4. How to convert red to magenta
5. Single-channel pictures
6. Three-channel pictures When assigning colors to drawings
7. "redundant coding"
8. Example of redundantly coded drawings
9. How to select colors that are easier to distinguish
10. Set of colors that is unambiguous both to colorblinds and non-colorblinds
11. Avoid indicating objects only by names
12. Green laser pointer
13. Colorblind proofing (checker) software and hardware
14. Note: When using colorblind proofing systems (important!)
15. Color Universal Design Organization
16. PDF and PowerPoint files for brochure and presentation

Colorblindness is not a total loss of color vision. Colorblind people can recognize a wide ranges of colors. But certain ranges of colors are hard to distinguish.

The frequency of colorblindness is fairly high. One in twelve Caucasian (8%), one in 20 Asian (5%), and one in 25 African (4%) males are so-called "red-green" colorblind. It is commoner than AB blood group.

There are always colorblind people among the audience and readers. There should be more than TEN colorblinds in a room with 250 people. If you design a facility or industrial product that will be used by 10,000 people, 400 of them would be colorblinds. (assuming 50% male and 50% female.)

When preparing your presentations (papers, slides, documents, advertisements, web pages etc.) as well as public facilities and industrial products, please take this into account. Here are some comments on how to make figures and presentations colorblind friendly.

3(+1) principles of Color Universal Design

For scientists:
There is a good chance that the paper you submit may go to colorblind reviewers. Supposing that your paper will be reviewed by three white males (which is not unlikely considering the current population in science), the probability that at least one of them is colorblind is whopping 22%!
[ 22% = 1-(1-0.92)^3 ]

What is colorblind?

People sense colors by comparing the output of three types of cone cells. This is called trichromacy . The sensitivity spectrum of the red, green and blue cone cells overlap significantly, though. (See top left panel below.)

If the function of one type of the cones cells is lost, the person can still recognize fairly good variety of hues using the remaining two cone cell types. But certain range of colors, for example between red and green, becomes harder to distinguish. This is called dichromacy . (The remaining five panels.)

If the spectrum of a particular cone cell type is shifted, usually because of the mutation in a opsin gene, color vision becomes somewhat similar to the dichromatic person. This is called anomalous trichromacy . The degree how color vision is affected depends on where the mutation occurred in the gene. The color vision of some anomalous trichromacy people is as affected as a dichromacy people. Some are almost the same as non-colorblind.

The majority of colorblind is the so called "red-green colorblind," with problems either in the red or green opsin gene. People with mutant red opsin gene is called protanope , and green opsin gene deuteranope .

People with the problem in blue opsin gene is called tritanope . This is relatively rare, with only 0.001% of occurrence.

Fig 2 Types of colorblindness (with frequency among Caucasoid male)

Back to top

How colorblind people see colors ?

Color vision of the red-green colorblind (protanopes and deuteranopes)

• Difficult to distinguish colors between red and green with similar intensity (brightness). The confusion occurs in somewhat symmetric manner: The differences between "green and red" and "yellow green and yellow" is especially small.
• In addition, protanopes feel "red" much darker, since the cone cells that cover the longest range of wavelengths are defect. Thus, "dark red" appear almost as "black."
• On the contrary, deuteranopes have no problem seeing "green" although their green cone cells are defect. This is because this range of wavelengths is also covered sufficiently by the blue and red cone cells.
  

• Difficult to distinguish certain colors which differ only in their red or green component. For example, "blue and violet (blue+red)", "green and brown", and "red and brown."
• Compared to vivid colors (with higher saturation), low saturation colors are especially hard to distinguish. For example, "sky blue and pink", "gray, pale sky blue and pale green", etc.
• To compensate the lack of red or green cone cells, colorblind people rely more on the information from the blue cone cells. Thus, they tend to be more sensitive to distinguish bluish hues than the non-colorblind people. For example,colorblind people think "red and green" or "yellow and yellow green" are almost the same color. But they regard "green and bluish green (emerald)" as completely different colors. (Compare the rectangles in the forth row of the above figure.)
• To compensate the low resolution in the recognition of hues, colorblind people tend to be more sensitive to the differences in brightness and saturation.

• Color names are given to the categories of colors that appear similar to non-colorblind people. This categorization may not be compatible with the color vision of the colorblind people. Thus, communication using color names are often very difficult.
  Example 1 : Different names for the same color -> Third and Fourth rows of the above figure. These colors all appear "brown" to colorblinds. But non-colorblinds assign various names such as green, red, orange and brown. Colorblinds cannot tell which is which.
  Example 2 :Same color name for different colors -> Fifth and Sixth rows of the above figure. Although Green and Bluish green are categorized as "similar color" by non-colorblinds, colorblinds think they are totally different colors, much more so than between red and green.
  These differences become the cause of miscommunication.

Color vision of the blue-yellow colorblind (tritanopes)

• Although human has three types of cone cells, non colorblinds heavily rely on the information from red and green cells to distinguish colors. Contribution of information from the blue cone cells is relatively low. Thus, even though tritanopes lacks the blue cone cells, their color vision is more similar to non-colorblinds than protanopes and deuteranopes. The distinction between blue and green, however, is more difficult than the non-colorblinds.

• If two types of cone cells are defect, the person loses color vision. This is rarer than the blue-yellow colorblind. Severe loss of eyesight also occurs.

Back to top

----------
The following few sections may not be interesting for those who are not biological scientists. Please skip to: When assigning colors to drawings.
----------

Figures of fluorescent staining (microscope images and DNA chip)

The biggest problem for the colorblind scientists (especially biologists) would be getting information from the fluorescent images.

With today's digital imaging system such as confocal microscopes, CCD cameras and array imagers, it is very easy to change the colors of each recording channel. When preparing for presentation, there is no reason to stick to the color you originally used for staining. Please choose the combination of colors that is most understandable to the audience.

two-channel pictures

Fluorescent double staining and DNA chips usually use red and green to show each channel. This causes two problems for colorblinds.

1: Impossible to understand which part is labeled with green and which part with red.

Fig 5 A typical fluorescent micrograph.

Fig 6 Simulation of how colorblinds see this picture.

2: Impossible to distinguish the region of "double positive." For colorblind people, yellow (red plus green) looks the same as bright green.

Fig 7 Above: Staining of two cells with labeled with one and two colors. Below: DNA chip with two colors.

How to solve this problem?

Please use magenta (purple) instead of red. Magenta is the equal mixture of red and blue. Although colorblind people have difficulty recognizing the red component, they can easily recognize the blue hue. The region of double positive becomes white , which is easily distinguishable for colorblinds.

Fig 8 Red-green (above) and magenta-green (below) version of the same pictures.

How to convert red to magenta

The conversion is very easy. Just copy the image of red channel to blue channel using image-manipuration software such as Adobe photoshop.

Fig 9 Conversion from red to magenta

Back to top

Single-channel pictures

Even images with single staining cause problem for colorblinds. Many people present such pictures with the color of the fluorescent dye used for the staining. But there are again two problems:

1: The pictures in pure red is hardly visible for the protanopes (see below for simulation). Even non-colorblind people feel difficulty seeing blue images.

Fig 10 protanope simulation of single staining in green and red

2: Pure green and red are out of gamut (printable color range). Subtle gradation will be lost in the published paper. For example, bright greens are not printable. They are all converted to dull dark greens when printed, losing the information about signal intensity.

Fig. 11 Images with pure colors on screen (left) and when printed (right)

Thus, monochrome is the best for tonal reproduction. Can you convey more information by making it color? If you just want to show what kind of label you used (GFP, Cy3, etc.), a sentence in the figure legend might be enough.

Fig. 12 grayscale image

Back to top

Three-channel pictures

In case of staining with three labels,

1: Show grayscale pictures of each channel. (when distribution of each signal is interesting)

2: Show combinations of two channels in magenta and green. (when spatial correlation between channels is interesting)

Back to top

When assigning colors to drawings

"redundant coding"

Back to top

Example of redundantly coded drawings

Fig. 14　Line drawings

Whereas the left graph use only color for coding, the left graph uses both color and shapes to differentiate different lines.

1. Thicker lines and bigger symbols make it easier to distinguish colors. (More cone cells can be used for color detection.)
2. Lines have different shapes (solid and dotted) so that they look different even without color.
3. Different symbols are used for each points (circles, triangles and squares.)
4. Separate keys are avoided. Labels are shown directly within the drawings, connected with thin lines. This way there is no need to compare the colors of two distant objects (lines and their keys). This is often difficult for colorblinds even when the objects are only a few centimeters apart.
5. Thus, the improved drawing can convey enough information even without color. For example, this drawing does not lose any information when being faxed or copied in black and white.

Fig. 15 Color fill

The top graph is coded only by colors. Since pale and unsaturated colors are chosen, it is difficult to distinguish different colors It is also difficult to describe the name of each color, making it difficult for communication. Readers are asked to compare the color of the graph itself with the separate keys. This is extremely difficult for Colorblinds.

The second graph is slightly better. The colors are more vivid and easier to identify. Separate keys are avoided so that readers no longer have to compare the colors of distant objects.

The bottom graph is the best. It uses not only colors but also various hatching. Each object is clearly distinguishable even without color vision. Again, this drawing does not lose any information when being faxed or copied.

Back to top

How to select colors that are easier to distinguish.

This is applicable only AFTER you designed the figure with redundant coding. (See above)

Being friendly to colorblind people does not necessarily mean that one should not use colors. Even for the colorblinds, colors are very useful cues to distinguish different objects easily and quickly. By carefully selecting colors that are easily recognizable to people with all kinds of color vision, one can maximize the effect of her/his presentations.

1) Avoid the situation where important information is conveyed only in the form of color.

2) Avoid the situation where texts and objects are obscured with the background.
For example, there should be enough contrasts in brightness and saturation between texts/objects and backgrounds. Avoid the combination of colors that have the same brightness but different only in hue. For example, red characters on green backgrounds is unreadable for colorblinds. Use either bright texts/objects over dark backgrounds, or vice versa.

3) Make texts and objects as thick or big as possible.
When the size of color-coded objects is small, only a few cone cells can be used for recognition. Colorblind people find it especially difficult to distinguish the colors of thin lines and small symbols. For color-coded text, use bold fonts such as Arial or Helvetica , rather than thin Times or NewYork .

4) Caution when using red.
For non-colorblind people, red is the bright and vivid color. But for colorblinds, it is as dull as blue or dark green. Especially for protanopes, who cannot detect long wavelength of red light, dark red appears almost as black. Thus, avoid using red characters on black backgrounds, including blackboards.Note that black text and red text look the same for protanopes. Colorblinds people, however, still feel certain ranges of reds as bright and vivid colors. Instead of pure dark red (RGB=100%, 0%, 0% or #FF.) , please use vermilion (yellowish red with shorted wavelength: RGB=100%,32%,0% or #FF2000 ), or light red (mixed with white: RGB=100%,8%,8% or #FF1414 ).

Back to top

Set of colors that is unambiguous both to colorblinds and non-colorblinds

Fig. 16 Colorblind barrier-free color pallet

This is a proposal of color pallet that is
1: unambiguous both to colorblinds and non-colorblinds,
2: with vivid colors so that color names are easy to identify,
3: can be printable with similar color both on screen and when printed.

• For red, vermilion is used since it is recognizable also to protanopes.
• Colors between yellow and green are all avoided, since they are indistinguishable with yellow and orange.
• For green, bluish green is chosen so that it won't be confused with red or brown.
• Since violet is close to blue and appear the same to colorblinds, reddish purple is chosen.
• Between vermilion and yellow, three colors with different apparent intensity is selected.
• Sky blue and blue are chosen so that they are distinguishable with there difference in brightness and saturation.
  
  
• Even for non-coloblinds, thin lines and small characters in blue and yellow are hard read. For thin lines and small objects, use darker blue and orange is preferable to sky blue and yellow.
  
  

When combining colors from this pallet,

• Use "warm" and "cool" colors alternatively.
• When using two warm colors or two cool colors, put distinct differences in brightness or saturation.
• Avoid combination of colors with low saturation or low brightness.
  
  

Back to top

When giving talks and lectures

Avoid indicating objects only by names

As shown in Fig. 4, the categorization of color does not match between colorblinds and non-colorblinds. Even for bright vivid colors, colorblind people cannot sometimes distinguish the name of colors. When explaining figures, avoid using only color names and describe also shapes or positions. For example, avoid saying "this red cell". Instead, say "this red, round cells on the top left", for example.

Green laser pointer

Fig. 17 Colorblind barrier-free color pallet

Since red laser pointers use long wavelength of light, it is often difficult for colorblinds to see where is pointed. Recently, green laser pointers becomes available, whose color is easy to see both for colorblinds and nom-colorblinds.

The light from one-milliwatt model is good for regular seminar room. A five-milliwatt model could be too bright except in a large auditorium.

• Beta Electronics, Inc.
  http://http://www.betalaser.com/
  
• DeHarpporte Trading Company
  http://store.yahoo.com/deharpport/greenlaspoin.html
  

Back to top

Colorblind proofing (checker) software

Vairous software are now available to check whether your colorful images will convey enough information to colorblind readers.

Photoshop / Illustrator CS4

This functionality is developmed in collaboration between Adobe and Color Universal Design Organization (CUDO), Kei Ito (University of Tokyo) and Mitsuyoshi Maekawa (Industrial Research Institute of Ishikawa).

• CUD proof for Photoshop
• CUD proof for Illustrator
• Adobe : http://www.adobe.com/

Vischeck

Vischeck is one of the most classic and established colorblind proof software. The software works best as a plugin for Image J, a free image manipulation software for Windows, Macintosh and Linux. (Both Image J and VisCheck are free.)

Note: Vischeck of Photoshop Plug-In for Windows works also well, but the Plug-In for Macintosh sometimes make misleading conversion and should better be avoided.

• Download ImageJ
  http://rsb.info.nih.gov/ij/
  
• Download VischeckJ 1.0 (Vischeck ImageJ Plug-In)
  http://www.vischeck.com/downloads/
  

  How to install:
  http://www.vischeck.com/downloads/vischeckJ/ReadMe_1.txt
  
  

• Online demonstration of Vischeck
  (upload your images and get the conversion sent via online)
  http://vischeck.com/vischeck/vischeckImage.php
• Download Vischeck Plug-In for Adobe Photoshop (Windows)
  http://www.vischeck.com/downloads/
• Colorfield Insight : simulation plug-in for Adobe photoshop (Macintosh)
  

Colorblind proofing (checker) hardware

In 2007, LCD computer displays with built-in circuit for colorblind proof are released by EIZO/Nanao Corporation. Because the simulation utilizes the feature that is equiped only in high-end monitors, they are not cheap (but not that expensive compared with the same monitor without colorblind simulation function.) The advantage of hardware-based simulation is that the simulation is performed on the fly. One can compare images with and without simulation regardless of the software (e.g. photographs, vector drawings, PDFs, word documents, presentations, web pages, etc.). Moreover, one can also simulate movies, TV programs, and games.

This functionality is developmed in collaboration between Adobe and Color Universal Design Organization (CUDO), Kei Ito (University of Tokyo) and Mitsuyoshi Maekawa (Industrial Research Institute of Ishikawa).

• Color vision deficiency simulation monitors
  http://www.eizo.com/products/lcd/color_vision/index.asp
• A brochure "Color Universal Design Handbook" (PDF file)
  http://www.eizo.com/products/lcd/color_vision/handbook.pdf

Back to top

Note: When using colorblind proofing systems (important!)

• 1: It is recommended to use an Adobe-RGB compliant monitor rather than an sRGB monitor, because the former avoids accidental color changes of the converted colors caused by out-of-gamut clipping.

• 2: Remember that not all colorblind people see colors as indicated in the colorblind proof. The converted views mimic the vision of the most strongly-affected types of colorblind people (dichromats). Many other colorblind people see colors in a more similar way to people with common-type color vision. Also, to compensate their problems in identifying reddish hue, colorblind people are often more sensitive to subtle differences in bluish hue, brightness, and texture of the colored objects that common-type people tend to overlook.

• 3: The color displayed in the colorblind proof is not necessarily the color recognized by colorblind people. In the proof, a range of colors that are difficult for colorblinds to distinguish are converted into one color. For example, some shades of pink and sky blue are converted to the same sky blue in the proof, but it is incorrect to think that "colorblind people see pink as sky blue." (In such case colorblind people regard the color either as pink or blue depending on the context in which the colored object appears.) Thus, the proof should only be used for identifying "which colors on the document are difficult for them to judge." In this respect, colorblind proof is not the true simulation of colorblind vision.

• 4: Do not judge the aptitude of colorblind people by looking at colorblind proof images. Colorblind proof is developed for helping non-colorblind designers, creators and scientists who want to make their products colorblind-friendly. It is not developed for the people in the personnel department who want to assess the aptitude of the employee. Because of the reasons shown above (#2 and #3), many colorblind people can distinguish more colors than are seen in the colorblind proof. Even the strongest type of colorblind people utilize color- and texture information that non-colorblind peole often overlook. The ability of colorblind people should be judged strictly by their performance in the real job, not by what other people "imagine" about their ability.

• 5: To achieve optimal Color Universal Design, it is also important not to rely completely on the colorblind proof but also to ask colorblind people to examine your design and give advises. (In this case look for the people who are most strongly affected, as weakly affected people may distinguish most colors that strongly affected people cannot.) This is because (a) although the calculation formula of the colorblind proof is designed to give reliable results in as large area of color space as possible, it sometimes fails in bright vivid colors, and (b) colors tend to appear differently on the computer screen compared to the final products/printed materials, where they are also affected by the lighting conditions under which they are viewed.

Back to top

Color Universal Design Organization

To expand the activity to promote colorblind-friendly design not only within the ivory tower of scientists but also to industrial products and public facilities, in Autumn 2004 we established a non-profit organization called the "Color Universal Design Organization" (CUDO). CUDO homepage: http://www.cudo.jp/e/

We have helped designers who are working for the train stations of Tokyo subway system, National Science Museum, hospitals, textbooks for primary and high schools, company annual reports, catalogues, controler and Graphical User Interface of TV and DVD recorders, copy and fax machies, car navigation systems, digicams, etc. Upon request, we issue a Color Universal Design mark (see above) to the facilities and products whose colorblind-friendliness is improved drastically. Currently, the acrtivity of CUDO is limited mainly in Japan, but some of the resulting products are exported worldwide.

Back to top

PDF and PowerPoint files for brochure and presentation

Please feel free to use these items for your classes and seminars. (Please don't forget, however, to mention Masataka Okabe and Kei Ito for reference.)

color_blind.pdf	How to make figures and presentations that are friendly to Colorblind people -- Brochure with figures (PDF file, 2.6MB)
color_blind.ppt	-- as above PowerPoint file (9.4MB)

 

Related Papers (preprints)

• Color Universal Design -The selection of four easily distinguishable colors for all color vision types- (preprint for the 2008 The Society for Imaging Science and Technology Meeting at San Jose)
  ichihara_etal_2008.pdf

Back to top

Acknowledgements

We thank Cahir O'Cane and John Mollon (Cambridge Univ.) for useful discussion. We also thank Kazuo Ikeo, Michina Shiraki and Shigeo Hayashi (National Institute of Genetics), Masakazu Yabuuchi (Olympus Co. Ltd.), Tomoko Hashimoto and Maki Kimura (Total Media) for images and drawings. Suggestions from Mitsuyoshi Maekawa (Industrial Research Institute of Ishikawa), Kenji Kitahara, Makiko Ohkido (Jikei Medial School), Yasuyo Ichihara (Kogakuin Univ.), Kohei Musha (CUDO), Koichi Iga (CUDO) and Yosuke Tanaka (CUDO) were extremely helpful. The barrier-free and color-universal design trademarks are designed and copyrighted by Kohei Musha.

Back to top