about this trade mark

How to make figures and presentations that are friendly to color blind people

Last update: 2002.11.20

Color blindness is not a total loss of color vision. Color blind 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. (50% male and 50% female) 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 ]

When preparing your presentations (papers, slides, web pages etc.), please take this into account. Here are some comments on how to make figures and presentations colorblind friendly.

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 simulation software
14. PDF and PowerPoint files for brochure and presentation

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

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 color blinds.

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.

Red 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 simulation software

You can simulate how your colorful images will appear for colorblinds. By combining "ImageJ" and "Vischeck ImageJ Plug-In", both of which are distributed freely, one can enjoy simulation on various platforms like Windows, Macintosh and Linux.

The simulation pictures in this web pages are all made by Vischeck. The software simulates only the stronger form of colorblinds (dichromate), which is about one fifth of the whole colorblind population. The remaining 80% are anomalous trichromat, whose color vision phenotype is somewhere between dichromat and non-colorblind.

• 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)
  http://www.colorfield.com/index.html

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.)

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 Kenji Kitahara, Makiko Ohkido (Jikei Medial School), Yasuyo Ichihara (Hosen Univ.) and Yosuke Tanaka (Tams) were extremely helpful. The barrier free trademark is designed and copyrighted by Kohei Musha.

Back to top