The document explores the concept of color contrast, detailing its various types, how humans perceive color, and the implications for color vision deficiency. It emphasizes the importance of using proper color contrast in design to enhance accessibility, providing tips and tools for testing color contrast against web content standards. Additionally, it includes fun facts and specific examples related to color blindness and its prevalence among different demographics.

1. © 2016 AT&T Intellectual Property. All rights reserved. AT&T, Globe logo, Mobilizing Your World and DIRECTV are registered trademarks and service marks of AT&T Intellectual Property
and/or AT&T affiliated companies. All other marks are the property of their respective owners.
March 1, 2017
Color Contrast
A deep dive into our colorful world
Crystal Baker
Senior Accessibility Solutions Engineer
AT&T Corporate Accessibility Technology Office (CATO)

2. POLL: Is
the
trashcan
tan or
grey?
TAN
GREY

3. 3
When we survey the characteristics of color effects, we can detect
seven different kinds of contrast…Each unique in character and
artistic value, in visual, expressive, and symbolic effect; and
together they constitute the fundamental resource of color design.
-Johannes Itten

4. 4
Itten’s Color Theory
1. Contrast of Hue
2. Light-Dark Contrast
3. Cold-Warm Contrast
4. Complementary Contrast
5. Simultaneous Contrast
6. Contrast of Saturation
7. Contrast of Extension

5. 5
Color Expression
 Yellow – light giving
 Red – fiery strength
 Blue - passive
 Green – fruitfulness
 Orange - radiant
 Violet - mysterious

6. 6
Fun Facts
 99% of all colorblind people are not really color blind but color deficient;
the term color blindness is misleading.
 Color blindness is more prevalent among males than females.
 “What color is this?” is the most annoying question you can ask your
colorblind friend.
 Ishihara plates are the best known color blindness tests, but they are not
the most accurate ones.

7. How do we see color?
 The human eye sees by light stimulating the retina, a lining inside the back
of the eye. The retina is made up of what are called Rods and Cones.
 The rods, located on the outer edge of the retina, give us our night vision
but cannot distinguish color.
 Cones, located in the center of the retina, are not much good at night but
do let us perceive color during daylight conditions.
 Color-detecting molecules, photopigments, are located in the cones.
There are three different kinds of cones that respond to blue, green and
red light.

8. 8
Three main types of colorblind categories:
1. Color Vision Deficiency:
 deutan - Red, orange, yellow, green appear shifted in hue towards red
 protan –Red, orange, yellow, and yellow-green appear shifted in hue
towards green
 tritan – Blue shifts toward green, and yellow shifts toward violet
2. Dichromasy – one cone isn’t functioning properly at all. They see no
perceptible difference between red, orange, yellow, and green.
3. Monochromasy – total colorblindness, where the individual only sees
black and white and the various shades of grey in between.

9. 9
Color Vision Deficiency Examples
Normal Vision Deuteronopia Protanopia Tritanopia

10. 10
Fun Facts
 The terms protan, deutan, and tritan are Greek and translate to first,
second, and third.
 A father can’t pass his red-green color blindness on to his sons.
 If a woman is red-green colorblind, all her sons will also be colorblind.
 Dogs are not colorblind.

11. 11
Can you just eyeball it?

12. 12
How to Use Contrast in Color
 If you are not experienced in working with color, keep color schemes
conservative, conventional, and simple.
 Use subtle shades of natural colors.
 Avoid bold, highly saturated primary colors except in areas of maximum
emphasis, and even then, use caution.
 Choose colors that reside on the same quadrant of the color wheel.
 Type must always contrast sharply with background colors to be readable.

13. Testing Color Contrast
 Colour Contrast Analyser by The Paciello Group
 Color Contrast Checker by Web AIM
13

14. Tools
 The tools help you determine the legibility of text and the contrast of visual
elements, such as graphical controls and visual indicators.
 The tools are a pass/fail assessment against WCAG 2.0 color contrast
success criteria.
 The tools are a simulation of certain visual conditions, including
dichromatic color-blindness and cataracts, to demonstrate how your web
content appears to people with less than 20/20 vision.
 The tools are *FREE*.

15. Luminosity Contrast Ratio
 (L1 + 0.05)/(L2 + 0.05)
 L1 is the luminosity of the lighter of the text or background colors
 L2 is the luminosity of the darker of the text or background colors.
 Note 1: The luminosity of a color is defined as 0.2126 * ((R / FS) ^ 2.2) +
0.0722 * ((B /FS) ^ 2.2).
 R, G, and B are the red, green, and blue RGB values of the color.
 FS is the maximum possible full scale RGB value for R, G, and B (255 for 8 bit color
channels).
 The “^” character is the exponentiation operator.
 Note 2: Luminosity values can range from 0 (black) to 1 (white), and
luminosity contrast ratios can range from 1 to 21.

16. Fun Facts
 Colorblind people feel disabled in everyday life, and almost nobody
recognizes this.
 John Dalton wrote the first known scientific paper regarding color
blindness in 1794.
 In certain countries you need normal color vision to get a drivers license.
 The anomaloscope is the most accurate color blindness test known today.

17. Demo
 Colour Contrast Analyzer
 Color Contrast Checker

18. 18
Fun Facts
 Red-green color blindness is a recessive sex linked trait, which causes more
men to be colorblind than women.
 Blue-yellow color blindness is a dominant, not sex linked, trait, which
means both men and women are equally affected.
 Many colorblind people have problems with matching clothes and buying
ripe bananas.
 There is no treatment or cure for color blindness.

19. POLL: Do logos have to meet color contrast ratios?
YES
NO

20. 20
Fun Facts
 John Dalton believed his whole life that the cause of his color blindness is a colored
fluid inside his eye balls.
 Police officer, firefighter, and airline pilot are the most famous jobs requiring normal
color vision.
 Quite a lot of people with normal color vision can’t pass an Ishihara plates test free of
errors.
 The International Colour Vision Society is scientifically investigating every aspect of
color vision and color vision deficiency.

21. s
blue
and
blac
k or
whit
e
and
gold
?

22. Presentation Resources
 http://www.color-blindness.com/2009/01/06/50-facts-about-color-blindness/
 http://colorvisiontesting.com/color2.htm
 http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/
 https://nei.nih.gov/health/color_blindness/facts_about
 http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-
color.html
 http://www.color-blindness.com/
 http://www.loveofgraphics.com/graphicdesign/color/colorcontrast/

23. Tool Resources
 http://www.paciellogroup.com/resources/contrastanalyser/
 http://webaim.org/resources/contrastchecker/
 http://www.456bereastreet.com/archive/200709/10_colour_contrast_checking_tools_
to_improve_the_accessibility_of_your_design/

25. 25
Upcoming AT&T Presentations at CSUN
WEDNESDAY
4:20PM AT&T Mobile and Desktop chat with ARIA: A Look Under the Hood
Glenn Bradford - Gaslamp AB, 2nd Floor, Seaport Tower
FRIDAY
9:00AM The Art of Language in Accessibility
Crystal Baker - Balboa C, 2nd Floor, Seaport Tower
9:00AM The Ongoing Challenge: Mobile Accessibility Testing
Jean Swart - La Jolla B, 2nd Floor, Seaport Tower
3:20PM A11y Lab: Conquering Mobile Accessibility though Device Analysis
Cory Cain and Glenn Bradford - Balboa C, 2nd Floor, Seaport Tower