10/28/2008 

 

   

   

   

         

   

   

         

     

       

         

         

NISTIR 7537
 

Guidelines for Using Color in 

Voting Systems 

Maureen Stone

StoneSoup Consulting

Sharon J. Laskowski

Information Access Division

Information Technology Laboratory

National Institute of Standards and Technology

Svetlana Z. Lowry

Information Access Division

Information Technology Laboratory

National Institute of Standards and Technology

U.S. Department of Commerce

Carlos M. Gutierrez, Secretary

National Institute of Standards and Technology

Patrick D. Gallagher, Deputy Director

 Page 1 
 

 

   

   

   

         

   

   

NISTIR 7537
 

Guidelines for Using Color in 

Voting Systems 

Maureen Stone

StoneSoup Consulting

Sharon J. Laskowski

Information Access Division

Information Technology Laboratory

National Institute of Standards and Technology

Svetlana Z. Lowry

Information Access Division

Information Technology Laboratory

National Institute of Standards and Technology 

October 2008 

 Page 2 
 

Guidelines for Using Color in Voting Systems 

This document has been prepared by the National Institute of Standards and 

Technology (NIST) and describes research in support of test methods and 

materials for the Election Assistance Commission's next iteration of the 

Voluntary Voting System Guidelines (VVSG). It does not represent a 

consensus view or recommendation from NIST, nor does it represent any 

policy positions of NIST. 

Certain commercial entities, equipment, or material may be identified in the 

document in order to describe an experimental procedure or concept 

adequately. Such identification is not intended to imply recommendation or 

endorsement by the National Institute of Standards and Technology, nor is it 

intended to imply that these entities, materials, or equipment are necessarily 

the best available for the purpose. 

 Page 3 
 

                           

                       

                       

                         

                   

                     

                   

                     

                         

                                 

                   

                       

                         

                           

                           

                           

                     

                       

                 

                               

                           

                               

                 

               

                           

                               

                         

                         

                             

                               

                         

                       

                         

Introduction 

This document is a digital color design guide for the electronic displays of voting

systems. It encodes best practice for usability in general, and specifically to

accommodate a wide range of color vision deficiencies. Systems that follow these

guidelines will use color sparingly, yet effectively. In the words of designer and

information visualization specialist Edward Tufte, they will “do no harm,” avoiding

common misuses of color that interfere with legibility and create confusion.

These guidelines have been written for digital system implementers (developers or

designers). Observations of existing voting systems indicate that it is important that

these guidelines be conservative and very specific. Rather than trying to specify the

limits of good design practice, we aim to describe a safe set of practices that will avoid

most common color design problems. Following these guidelines, therefore, should

produce a system that is legible and avoids visual clutter and confusion.

These guidelines are designed to accommodate users with less than perfect vision. We

looked specifically at the problems common to aging eyes, and those caused by different

forms of color vision deficiency (CVD), or “color blindness.” We have found that even

experienced visual designers often fail to accommodate the less than perfect eye, and the

problems experienced using digital displays by those with CVD are not widely

understood or appreciated. These guidelines, therefore, may set new standards for using

color in a way that is functional and accessible.

Functional Color Design 

Voting systems do not require color, as black and white paper ballots have been used for

years. Digital displays offer the opportunity to use color to make the systems more

attractive and easier to use. The risk is, however, that color used poorly will make the

user interface (UI) confusing and illegible. Avoiding confusion and maintaining

legibility are the driving principles for this guide.

The key to avoiding the “color chaos” common in many poorly designed digital displays

and user interfaces is to use color only for a clearly defined function. Tufte defines four

fundamental uses for color: to label (color as noun), to measure (color as quantity), to

represent or imitate reality (color as representation), and to enliven or decorate (color as

beauty).

The key use of color in voting systems will be to label or identify different informational

and functional elements in the voting system. Color used this way acts as a language for

describing the components of the voting system. Like any good labeling, the different

terms must be easily distinguishable and consistently used. In a well‐designed color

encoding, the different colors should be easy to identify and describe (blue, pink,

 Page 4 
 

                           

         

                             

                           

                 

                                   

                               

                             

                         

                           

           

                           

                           

                             

               

                             

                               

                           

                         

orange), and it should be easy to describe what function each color labels (warning

message, navigation controls, selection feedback).

Legibility means the ability to easily distinguish text and symbols so that they can be

reliably read. The key factor affecting legibility is contrast between the symbol and its

background, and specifically the luminance (perceived brightness) contrast. Difference

in color alone is not sufficient, as can be seen simply by placing yellow text on a white

background, like this: Can you read this? While most people can see that there is

something yellow on the page, it is impossible to read the words because there is

insufficient luminance contrast between white and yellow to perceive the edges of the

letters. Increase the contrast by making the background darker, and the yellow text is

perfectly legible: Can you read this?

Figure 1: Example of labeling and legibility. Map courtesy of the National Park Service (www.nps.gov)

The map in Figure 1 shows consistent labeling and excellent legibility. Surface roads are

black, state highways are red, and major highways are dark red. Cities are yellow, water

is blue, and the national park is green.

Any good design using color should also be usable when rendered in shades of gray

proportional to the luminance of each color. Designers call this “get it right in black and

white” and will literally evaluate visual designs this way, for example, by converting to

grayscale. This allows evaluation of the design strictly in terms of shape, spatial

 Page 5 
 

                             

           

                               

                         

                           

        

                       

                       

                               

                           

   

                                 

                               

                         

                         

                           

                      

positioning, and contrast. Color chaos is often the result of trying to use color to

compensate for a poorly designed layout.

Figure 2 shows the same map in shades of gray that are proportional to each color’s

luminance. The map is still legible and usable because the gray values are sufficiently

distinct, and because the color encoding is duplicated by other visual properties such as

shape and line width.

Figure 2: The map from Figure 1 rendered in shades of gray.

For a universally accessible system, all critical information must be encoded by

properties other than color, such as shape or labeling. While people who see no color at

all are rare, differences in color perception are relatively common, as discussed in the

next section.

Color Vision and CVD 

Physically, color vision is defined by the response of the cone cells in the retina of the

eye, which transform spectral energy into a set of three color responses, very much as a

digital camera filters input spectra to produce red, green, and blue pixel values.

Statistically, people with normal color vision all have the same “normal” cone response,

though in practice there is some variation. People with a color vision deficiency (CVD)

have one or more cone responses that deviate significantly from normal.

 Page 6 
 

         

       

         

                 

     

       

         

               

       

              

                    

                                 

                         

       

                             

                       

                       

                           

                             

                           

                             

                       

Perceptually, color is organized into

three dimensions: hue, lightness, and

colorfulness. Hue corresponds to the

name of the color, such as red, green, or

purple. Lightness is the perceived

lightness of a color. Colorfulness,

sometimes called saturation or chroma,

indicates how vivid the color is. This can

be organized into a three‐dimensional

color space, as shown in Figure 4.

Figure 4: Perceptual organization of color.

Figure 5 shows hue as a color wheel, as an artist or designer might use for color

selection. It also shows gradients (smooth variations) in lightness and chroma for the

same color of blue.

Figure 5: Hue organized as a designer’s color wheel, plus gradients in chroma and lightness.

Hue is the dimension most strongly associated with labeling, lightness with legibility.

People with CVDs may perceive hue and colorfulness quite differently, but often

maintain a nearly normal perception of lightness. This will be the least distorted for

achromatic colors (grayscale), but may vary from normal as a function of the color.

The human eye has three cones, with three different spectral responses as shown in

Figure 6. There is a short wavelength cone (colored blue) and an overlapping pair of

medium and long wavelength cones (green and red). The corresponding CVDs are

 Page 7 
 

                   

       

 

                                   

                     

                 

                     

                             

                           

         

                             

                             

                         

                               

                             

                     

                           

                       

                     

             

tritanopia, deuteranopia, and protanopia. People with these CVDs are often called

tritans, deutrans, and protans.

 Wavelength (nm) Wavelength (nm) 

Figure 6. Process of color vision, from input spectra (power vs. wavelength in nanometers) to 

tristimulus response. From A Field Guide to Digital Color by M. Stone, published by AK Peters, 2003.

The degree of CVD depends on the degree of distortion in the cone response. If a cone is

missing, then the perception of color collapses to a two‐dimensional response

(dichromat—two color). Approximately 8% of Caucasian males have a genetically

induced difficulty perceiving reds and greens; about 2% are dichromats. Abnormal

response to blues, purples, and yellows is very rare genetically (less than 1%), but affects

men and women equally. However, it can be caused by head injury, disease, or

medication, especially in older viewers.

It is possible to simulate dichromatic CVD by modeling the effect of the missing cone.

Figure 7 shows the color wheel from Figure 5 as viewed by a tritanope (tritan

dichromat), a deuteranope, and a protanope. The colors are not precisely accurate, but

nicely illustrate the reduction of color space to basically two hues. It is striking how little

difference there is between the protan and deutran response, due to the overlap in the

medium and long wavelength cones. The red (longest wavelength) colors, which

stimulate only the long wavelength cone, appear darker to a protanope than to a

deuteranope. Most people with CVDs are not dichromats, however, and therefore see

more colors than indicated by a Vischeck simulation (www.vischeck.com). Their color

space is distorted, not collapsed into two dimensions.

 Page 8 
 

                     

                         

                     

                       

                   

                     

                           

                     

                           

Figure 7. Vischeck simulation of different forms of CVD. 

The following are common problems associated with different forms of CVD:

•	 To deutrans, green will appear lighter and more yellowish. Green on white may

be impossible to see. Green and amber will be difficult to distinguish.

•	 To protans, red colors will appear darker, making red on black especially

difficult to see. Brown and gray will be difficult to distinguish.

•	 Both protans and deutrans will have difficulty distinguishing red from green,

though those only mildly affected can do so if the colors are sufficiently strong.

•	 A less appreciated, but potentially more common problem for protans and

deutrans is distinguishing colors that differ only by the addition of red or green,

 Page 9 
 

                               

  

                     

                         

                       

             

                             

                       

                           

                         

                     

         

                      

                     

                       

                     

                       

   

                         

                     

                       

                 

               

                           

               

                 

      

   

                       

         

such as blue vs. purple, yellow vs. orange, blue vs. cyan (aqua, teal), and gray vs.

brown.

•	 Tritans have difficulty distinguishing blue from green and yellow from purple.

•	 A true dichromat can see only two hues distinct from gray, plus lightness

variations. True dichromats, who have only two functioning cones, are much less

common than people with one weak cone.

•	 While very rare, there are people who see only shades of gray. Many of these

have other visual problems as well (lack of acuity, sensitivity to light).

Guidelines for Using Color 

These guidelines discuss how color is used, but not specifically which colors to choose.

Selecting effective color palettes is described in the next section. The guidelines are

grouped into three subcategories: color function, legibility, and avoiding color chaos.

Use color for a function.

1.	 Do no harm. Use color sparingly and for a specific purpose.

2.	 Use color only to categorize the type of information (candidate vs. office,

description vs. notification, error or warning) or to identify different types of

controls and navigation features (buttons, progress bar, etc.) or to provide

selection feedback. It should be possible to clearly describe what information the

color provides.

3.	 Use color only for secondary coding. Any information supplied by color must be

duplicated. Symbols and controls should have unique shapes or labels. Text

layouts should have sufficient spatial and typographic cues to be easily readable

without color categorization. Selection feedback should include unique symbols

(X, checkbox, underline, outline box) or light/dark inversion.

4.	 Use color consistent with convention. Red should only be used to mean “stop” or

“error,” and amber only for “caution or “alert.”

5.	 Use color consistently throughout the voting system, including physical buttons,

controls, and signage.

Maintain legibility.

6.	 Using color must not interfere with text or symbol legibility. Luminance contrast

must be at least 10:1.

 Page 10 
 

                         

                         

                     

   

                             

                             

                                   

                           

                           

                               

                       

                               

                             

                           

           

                       

                     

                         

                         

                     

                         

         

     

                           

                        

                       

                       

        

                       

                               

                           

   

                   

7.	 Avoid placing colored text or symbols on a colored background. Either the text

or the background should be black or white. Luminance contrast and legibility is

difficult to predict for color‐on‐color, especially for people with color vision

deficiencies (CVDs).

8.	 Use only white, yellow, or a light cyan for text on a black background. Colored

text on black (or very dark) backgrounds can be difficult to read, especially if the

text is a dark, saturated color (such as blue or red). This may be true even if the

10:1 legibility guideline is met. Other pastel colors, such as light green, may also

be legible, but their color may not be easily visible to those with CVD.

9.	 When using color for labeling, use wide lines or blocks of color, not thin lines or

colored text. Symbols should be blocky and simply colored. Use colored buttons

with black or white text rather than colored text on a black or white button. If

text is colored, the text should be bold. For example, compare this to this to

...this.... The blue color is identical in all three cases, but is progressively more

visible as the area is increased.

10. Avoid using pastel washes to separate or group blocks of information. Instead,

use spacing, rules, or borders. Coloring the background decreases contrast, and

the hue in pastel washes may not be visible to people with CVDs.

11. Present most information as black text and symbols on a white background, like

a printed page. This maximizes contrast and legibility, and is more comfortable

and familiar than white on black. Users sensitive to glare, however, may prefer

white text on a black background.

Avoid color chaos.

12. For any given page/display, use no more than four colors used for labeling and

categorization. Color labels most effectively when the number of colors is small.

13. Do not use colored text, borders, backgrounds, or patterns for purely decorative

purposes. They can add complexity and may visually conflict or be confused

with colors used functionally.

14. Clearly separate colors used for identification, such as corporate logos or state

seals, from the functional part of the ballot, either in a corner or, ideally, on a

separate page. As in the previous guideline, the goal is to avoid visual conflict

and confusion.

15. Select colors as a functional set, using the guidelines below.

 Page 11 
 

                     

                             

                     

               

                       

                                       

                           

                           

              

                         

                         

                         

         

                     

                       

                                 

                         

               

                           

                         

                 

                                 

                         

                             

                           

                               

                           

                               

         

Guidelines for Selecting Colors 

These guidelines describe how to select colors that work effectively for information

display. The first set of guidelines helps ensure legibility, and also create colors that are

functional and reasonably aesthetic. The second set of guidelines addresses specific

forms of CVDs and suggests accommodations for them.

Several of these guidelines reference the perceptual metric L*, which measures perceived

lightness on a scale of 0 to 100 (black to white). L* is the L in the CIELAB color space.

Expressing L* in terms of RGB (red, green, blue) pixels requires knowing the color

characteristics (profile) of the display. For these guidelines, pixel values are for a display

that conforms to sRGB standard color space.

1.	 Select all functional colors together, creating a color set or palette. Choose colors

that can be described by simple names (blue, green, purple, light blue). Each

unique function should have a unique color name. This makes the color encoding

easier to identify and remember.

2.	 Avoid bright, highly saturated (primary) colors. They are visually too obtrusive

and can create legibility problems. In RGB terms, colors should never be

specified only as a combination of 0 and 255 (e.g., 255, 0, 0). In terms of the

computer graphics color space HSV (hue, saturation, value), either V can be 255

or S can be 255, but not both.

3.	 An exception to #2 is yellow (255, 255, 0), which may be used for highlighting

and selection feedback, or for text on a black background. Yellow should never

be used for text or symbols on a white background.

4.	 Black text on a white background is the best choice for most of the ballot. It is

maximally legible and mimics paper ballots. If a tinted background is used, it

should be very light (L* > 94). For most displays, the colors created by restricting

all of R, G and B to the range 240‐255 will be sufficiently light.

5.	 On an sRGB display, a contrast ratio of 10:1 for colors on a white background is

equivalent to an L* value of 37.8. Lower L* values have higher contrast with

white. Colors used for large symbols and borders can be lighter; an L* value of 48

will create sufficient contrast (6:1).

 Page 12 
 

                                         

                             

                         

                                 

                                 

                                     

                             

                                   

                                 

                                 

                       

                 

  

                                     

                      

Figure 8: Colors designed to have a 10:1 contrast ratio applied to colored text on white and white text on a

colored background. Font is 12 point Verdana, regular and bold. The top row shows the maximum

contrast achievable (black on white, should be at least 150:1, possibly much larger)

Figure 8 shows a set of highly saturated colors that achieve a contrast ratio of 10:1 if

rendered on an sRGB display. The RGB and HSV (or HSB) values for the colors in Figure

8 are given in the table below. While most colors are very saturated (S in the range of 80

to 100), the value (brightness) varies significantly with the color. Blue is nearly full value

(V=91 out of 100), but green is less than half (V=41). This illustrates clearly that V in the

HSV color space is not the same as luminance. Note that while the blocks of color are

distinctly different, the colored text is much less so. This is due both to the difficulty of

perceiving small areas of color and glare from the adjacent white pixels.

Color Gray Brown Red Pink Purple Blue Cyan Green

R

G

B

89

89

89

136

73

0

182

0

0

161

28

128

108

42

219

0

69

231

0

97

123

15

104

0

H

S

V

0

0

35

32

100

53

0

100

71

315

83

63

262

81

86

222

100

91

193

100

48

111

100

41

Table showing the sRGB pixel values expressed as RGB values (0 to 255) and as HSV values (H ranges

from 0 to 359, S and V from 0 to 100).

 Page 13 
 

                               

                         

                       

                               

                             

                     

                       

                               

                             

          

                     

               

                     

                         

                             

                  

                 

                       

                       

                       

   

                             

                       

                    

                     

                           

                     

                           

       

                     

                           

                           

                           

                         

                             

The actual contrast created by using these colors will vary with the display. The sRGB is

a standard RGB color space designed for common encoding on monitors and displays

(http://en.wikipedia.org/wiki/SRGB) . It is designed to be easily displayed on a computer

monitor with a “gamma” value of 2.2, which is the default for Windows or Linux. On

Macintosh systems, the default gamma of 1.8 must be changed to 2.2 to achieve the

correct appearance. A lower gamma value makes dark colors appear lighter, which

reduces the contrast; these would be around 6.5:1 on a gamma=1.8 display.

Viewers with CVD perceive a restricted set of hues, so in general, fewer colors can be

uniquely used for labeling. These guidelines help select colors that are most likely to be

perceptibly different to all viewers.

1.	 Include lightness differences between colors used for labels. People with CVD

are practiced at noticing subtle differences in lightness.

2.	 Minimum confusion will be caused with a blue/orange or blue/brown encoding

(or cyan/yellow on a black background). The blue should not be the pure display

blue (0, 0,255), but should instead include at least 50% green as well. Protans and

deutrans will see a blue/orange encoding, tritans a greenish‐blue/pink.

3.	 Avoid stoplight encoding (red, amber, green), which can be particularly

challenging for protans and deutrans. If it is used, emphasize the brightness

differences. Red should be darker than green, which should be darker than

amber. Note that green‐amber confusion is as significant a problem as difficulty

distinguishing green‐red.

4.	 Avoid labeling with colors that differ only by the addition of red or green, as

they may not be distinguishable. These include: blue vs. purple, yellow vs.

orange, blue vs. cyan (aqua, teal), and gray vs. brown.

5.	 Avoid encodings that require distinguishing different shades of green and blue,

especially greenish blues vs. bluish greens (a jade green vs. a dark teal, for

example). The green‐blue boundary is ambiguous even for the normally sighted,

may vary with culture, and shifts as the eye ages and yellows. Tritans cannot

distinguish blue from green.

6.	 Use a CVD simulator like Vischeck (www.vischeck.com) to review your design.

Figure 9 shows the colors in Figure 8 as seen by a dichromat (Vischeck simulation).

Only brown and blue remain distinct across all three forms of CVD. These highly

saturated colors are good for those with weak color vision, but they could be

improved by varying the luminance. Purple and blue should be darker. An even

better solution would be to avoid using the colors for text, which would remove the

 Page 14 
 

                         

           

                                 

                         

10:1 constraint and allow a wider range of luminance variation. Cyan, green, and

pink would most naturally be lighter.

Figure 9. The colors from Figure 8 as seen by dichromats (Vischeck simulation), plus their luminance (all

the same). Only blue and brown remain distinct for all forms of CVD.

 Page 15