The Use of Color in User
Interfaces
Jeff Offutt
http://www.cs.gmu.edu/~offutt/
SWE 205
Software Usability and Design
How the Eyes See Color
Focal point
Retina
Retina
1-Jul-16
Lens
Lens
© Jeff Offutt
Lens adjusted for green
Lens adjusted for red
2
Color Spectrum
Color
Purple
Blue
Green
Yellow
Orange
Red
Wavelength
< 430 nm
450 – 480 nm
500 – 550 nm
570 – 590 nm
610 – 630 nm
> 640 nm
See the Java Applet color wheel at:
http://www.ficml.org/jemimap/style/color/wheel.html
1-Jul-16
© Jeff Offutt
3
Color Wheel – Opposites
1-Jul-16
© Jeff Offutt
4
Notes on Human Eyes
• Lens are adjusted for green when relaxed
• Reds are easiest to discriminate
• Blues are hardest to discriminate
• The number of colors we can perceive shrinks as
we age
1-Jul-16
© Jeff Offutt
5
Color Lightness
Wavelengths reflected by a ripe tomato
100
75
50
25
0
1-Jul-16
350
400
450
500
550
© Jeff Offutt
600
650
700
6
Color Contrast
• Relative brightness of signal over background
• Greater contrast – better perception
• Opponent colors yield more contrast
(orange:blue, red:green)
• Dark on light has more contrast than light on dark
– This is true on paper and on computer screens
– This effect is reversed when projecting
1-Jul-16
© Jeff Offutt
7
Color Contrast
• Relative brightness of signal over background
• Greater contrast – better perception
• Opponent colors yield more contrast
(orange:blue, red:green)
• Dark on light has more contrast than light on dark
– This is true on paper and on computer screens
– This effect is reversed when projecting
1-Jul-16
© Jeff Offutt
8
Guidelines for Using Color
1. Avoid bold opponent colors at the same time
–
Use opponent colors only for highlighting
2. Do not use blue for text, thin lines, and small
shapes
3. Older users need more brightness
4. Use dark on light when printing and on-screen
Light on dark when projecting
5. Use bright, spectrum-centered colors for text
(black, white, yellow, red)
6. Use different background colors to split screen
1-Jul-16
© Jeff Offutt
9
Guidelines for Using Color (2)
7. Use color to categorize information and controls
8. Group related elements by using a common
background color
– Use color to highlight regions in web sites
9. Use brightness and saturation for highlighting
10. Use redundant coding of shape and color
– Round / green for beginners
– Square / blue for intermediate
– Diamond / black for advanced
1-Jul-16
© Jeff Offutt
10
VIM with Color
HTML tags
Attributes
Content
Comments
Values
1-Jul-16
© Jeff Offutt
11
Conclusions
Color can improve usability
Color is often over-used
1-Jul-16
© Jeff Offutt
12