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/

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