map design for the color vision impaired -...
TRANSCRIPT
![Page 1: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/1.jpg)
Map Design for the
Color Vision Impaired
Dave Hobbins
Forestry & Environmental Studies
![Page 2: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/2.jpg)
What is Color Blindness?
Misnomer
Color Vision Impairment or
Color Vision Deficiency (Amer. Optometric Assoc.)
Most can see color
They cannot differentiate color
shades of red and green most common
blues and yellows (rare)
![Page 3: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/3.jpg)
Causes (Amer. Optometric Assoc. www.aoa.org)
Inherited (X chromosome)
Injury
Illness (diabetes, glaucoma, macular degen.,
Parkinson’s, MS, sickle cell anemia, etc.)
Medication (heart, BP, infection)
Aging (esp>60): tanning dims blue
Chemical Exposure (fertilizers, styrene,
toluene, PCE, solvents, mercury)
![Page 4: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/4.jpg)
Classification (www.webexhibits.org)
Male Female
Anomalous Trichromacy (weak sensitivity)
protanomaly (red) 1.3% 0.02%
deuteranomaly (green) 5.0 0.35
tritanomaly (blue) .0001 .0001
Dichromacy (cone absent)
protanopia (red) 1.3 0.02
deuteranopia (green) 1.2 0.01
tritanopia (blue) .001 ?
Illness, Aging, Chemicals, etc. No data
![Page 5: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/5.jpg)
Why Does it Matter?
Aging population
Universal design and accessibility
Avoids discrimination
Complies with regulations
Expands audience (Gardner 2005 on web design)
More clients
Increases user satisfaction
Increased productivity
The right thing to do!
![Page 6: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/6.jpg)
Trichromacy theory and the
RED BLUE
GREEN
YELLOW CYAN
MAGENTA
RED
opponent-process theory
![Page 7: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/7.jpg)
Effects for Protanopia (red) Clark 2003
cannot distinguish red and greens
reds appear dark
red and black can look the same if red is dim
So, lightness (“brightness”) matters
![Page 8: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/8.jpg)
missing red cones
ColorOracle
http://colororacle.cartography.ch/
![Page 9: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/9.jpg)
Effects for Deuteranopia (green) Clark 2003
cannot distinguish red and greens
reds do not appear red or dark
No lightness (“brightness”) compensation
Deuteranomalous – better red-green discrimination
and better differentiation of shades
![Page 10: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/10.jpg)
missing green cones
ColorOracle
http://colororacle.cartography.ch/
![Page 11: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/11.jpg)
Effects for Tritanopia (blue) Clark 2003
blues and greens confused
yellows and violets confused
![Page 12: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/12.jpg)
missing blue cones
ColorOracle
http://colororacle.cartography.ch/
![Page 13: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/13.jpg)
Points to Remember
Color is a three dimensional
hue - lightness - saturation
hue - value (reflectance) - chroma (purity)
Color has perceptional dimensions
Red and green are most common problem
Blue is “universally recognizable”
![Page 14: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/14.jpg)
Recommendations (Brewer 1997, 2005; Jackson et. al. 1994; Jenny & Kelso 2007)
Choose unambiguous color combinations
use complementary pairs or “color sets”
Avoid colors for class differentiation
use another visual variable (e.g. size, shape, etc.)
Annotate features
Reduce the number of classes
![Page 15: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/15.jpg)
Recommendations (Brewer 2005, Clark 2003)
Hues of concern
red, orange, brown (B), yellow, beige (C), green
(confusing)
magenta, gray, cyan (indistinguishable)
Do not use red and black combinations
Color important only where “actual meaning” is
attached to the color
Use lightness steps to differentiate a range
![Page 16: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/16.jpg)
Recommendations (Brewer 2005, Clark 2003)
Safe color pairs for web/map use
red/blue, red/purple
orange/blue, orange/purple,
brown/blue, brown/purple,
yellow/blue, yellow/purple,
yellow/gray
blue/gray
![Page 17: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/17.jpg)
Point/Line Features (Jenny & Kelso 2007)
Saturation changes only slight help to red-green
impaired
Better to shift hue from green to blue
Best solution – vary shape and combine with
variable hue and saturation, and annotation
The best maps are easy to decode
![Page 18: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/18.jpg)
Jenny & Kelso 2007
![Page 19: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/19.jpg)
Areas / Raster (Brewer 1997, Jenny & Kelso 2007)
Vary lightness on red-orange-yellow end
Omit yellow green to avoid green confusion
Avoid green
*Use red, orange, yellow, light blue, dark blue*
Align yellow-blue transition with data pivot point
![Page 20: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/20.jpg)
See: Jenny, B. and N.V. Kelso. 2007. Color Design for the
Color Vision Impaired. Cartographic Perspectives 58: 61-67.
![Page 21: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/21.jpg)
C Brewer, Penn State (Brewer 2005)
tools not perceptually scaled (HSV poor approx.)
Do it by eye!
![Page 22: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/22.jpg)
C Brewer, Penn State (Brewer 2005)
Brewer, C.A. 2005. Designing Better Maps: A
Guide for GIS Users. E.S.R.I. Redlands, Ca.
203 p.
![Page 23: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/23.jpg)
Color Brewer
Brewer developed color-blind confusion zones
http://colorbrewer2.org/
http://colororacle.cartography.ch/
![Page 24: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/24.jpg)
Resources
http://colorbrewer2.org/
http://www.vischeck.com/
http://colororacle.cartography.ch/
![Page 25: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/25.jpg)
Bibliography/Citations
Brewer, C.A. 2005. Designing Better Maps: A Guide for GIS Users. E.S.R.I.
Redlands, Ca. 203 p.
Gardner, S.D. 2005. Evaluation of the ColorBrewer Color Schemes for
Accomodation of Map readers with Impaired Color Vision. M.S. Thesis. Penn.
State Univ. 151 p.
Jackson, R., L. MacDonald, and K. Freeman. 1994. Computer generated
colour: A practical guide to presentation and display. New York: John Wiley
and Sons. 244 p.
Jenny, B. and N.V. Kelso. 2007. Color Design for the Color Vision Impaired.
Cartographic Perspectives 58: 61-67.
Clark, J. 2002. Type and Color. Building Accessible Websites. New Riders
Pub. 415 p.
Karagol-Ayan, B. 2001. Color Vision Confusion. Universal Usability in
Practice. University of Maryland. http://otal.umd.edu/uupractice/color/
Accessed 25 August 2011.
![Page 26: Map Design for the Color Vision Impaired - megug.orgmegug.org/wp...Design-for-the-Color-Vision-Impaired-Dave-Hobbins.pdf · Color has perceptional dimensions ... Color Design for](https://reader031.vdocuments.us/reader031/viewer/2022022507/5ac7a64a7f8b9acb688bd265/html5/thumbnails/26.jpg)
Thank you!
Questions?