This document appears to be a series of slides from a workshop on designing with color presented at the Grace Hopper Celebration 2017. The workshop covers topics such as the science of color perception, choosing accessible color combinations, testing color contrast, and conducting an empathy exercise using low vision simulation goggles. Attendees are encouraged to test color combinations using the Color Contrast app and to consider how color choices impact users with varied abilities. References and additional resources on color and accessibility are also provided.

1. #GHC17
Designing with Color,
a collaborative curiosity!

2. PAGE 2 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
ColorContrastAppbyUserLightLtd.
Duringthisworkshopwe
willbeusingtheColor
Contrastappfrom
UserLightLtd.
Thisfreeappisavailablein
theiOSAppStore.

3. PAGE 3 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
IntroducingCharu…
Hello!DesigningwithColor|IBMAccessibility
CharuPandhi

4. PAGE 4 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation© 2017 IBM Corporation
PAGE 4 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY
Introducing Moe…
Hello!DesigningwithColor|IBMAccessibility
MoeKraft
4

5. PAGE 5 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Icebreaker, Color and Feelings
• How are you feeling today?
• Pick a color that most
identifies with your feeling?

6. PAGE 6 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Color, a powerful force in our lives
“Colors, like features, follow the
changes of the emotions”

7. PAGE 7 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Meaning of color
Users perceive color differently
Although the meaning of color can differ
across individuals and cultures, some
emotive qualities have been commonly
linked to certain colors.
For example, blues and greens bring to
mind the coolness of water; fiery reds
and oranges add warmth to a design.

8. PAGE 8 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
What is color?
Science of how we perceive color

9. PAGE 9 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
What do you see?
9

10. PAGE 10 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation 10
Color Helps Us to Differentiate Objects

11. PAGE 11 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation© 2017 IBM Corporation
PAGE 11 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY
Color is perception
Color is the
perception or
sensation we have
to light reflecting
off objects.
1

12. PAGE 12 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Dispersion
White light is
dispersed as it passes
through a prism into
different colored light
of varying
wavelengths.

13. PAGE 13 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Absorption & Subtraction

14. PAGE 14 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Color Perception
Let’s have some fun.

15. PAGE 15 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Gray checkerboard
Which square is
lighter, A or B?
Yellow-blue dogs
15

16. PAGE 16 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Color is
impacted
by:
Emotion
Context
Illumination
Biology

17. PAGE 17 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Retinal cones
Red, Green and Blue
cone cells are sensitive
to different
wavelengths of light

18. PAGE 18 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Choosing good
color
Understanding these variances how do we choose
good color in our design

19. PAGE 19 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
How do you choose good colors?
“The most important factor in readability is the
luminosity contrast between the foreground text
and its background, “hue and saturation per se are
irrelevant”
– Lighthouse Hanbook, Silverstone, et. al.

20. PAGE 20 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation© 2017 IBM Corporation
PAGE 20 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY
Color Contrast
Color contrast enables
users with moderately
low vision or color-
blindness to read text
without contrast
enhancing technology.
It is also good design!

21. PAGE 21 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Does your presentation meet contrast
requirements?
Which can you read best?
Which can you read best?
Which can you read best?
Which can you read best?
Which can you read best?
Which can you read best?
Which can you read best?
Which can you read best?

22. PAGE 22 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
What is the Minimum Contrast
requirement?
1.4.3 Contrast (Minimum):The
visual presentation
of text and images of text has
a contrast ratio of at least 4.5:1,
except for the following: (Level
AA).
[ISO-9241-3] requires a
minimum contrast of 3:1.The
4.5:1 ratio accounts for the loss
in contrast that results from
moderately low visual acuity,
congenital or acquired color
deficiencies, or the loss of
contrast sensitivity that
typically accompanies aging.

23. PAGE 23 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
A tip from IBM Design Full-Spectrum Color
Palette
Blue background has a grade
of 70
minus 20 grade for Purple text
-----------------------------------
= 50 grade
Grade 50 or greater is
accessible!

24. PAGE 24 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Complimentary color test

25. PAGE 25 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
How to test for contrast

26. PAGE 26 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Color Contrast Activity
Choose two complementary
colors
Using Color Contrast iOS App
from User Light determine
contrast ratio.

27. PAGE 27 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Things to
Consider
1.4.1 Use of Color: Color is not used as the only
visual means of conveying information,
indicating an action, prompting a response, or
distinguishing a visual element. (Level A)

28. PAGE 28 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Information conveyed through Color

29. PAGE 29 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Which color scheme works for you?
How about for someone with light sensitivity?

30. PAGE 30 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Low Vision
Goggles
EMPATHY EXERCISE

31. PAGE 31 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Empathy Exercise
• Break into groups of 2 or 3
• Take a pair of the low-vision
goggles
• Use your phone or borrow a phone
• Assistance by anyone in your group
is fine & encouraged.

32. PAGE 32 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
The Challenge
Take a photograph of something in the room.
Share that photograph on social media, tag us on
Twitter!
@charupandhi | @moekraft | @ibmaccess |

33. PAGE 33 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation©2015IBMCorporation

34. PAGE 34 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
References
• Gouras, Peter. "ColorVision by Peter Gouras."Webvision:ColorVision.
University of Utah, 1 July 2009.
• Wright,Angela. "Psychological PropertiesOf Colours - Colour Affects."
Psychological Properties Of Colours - Colour Affects. N.p., n.d.Web. ©
2008-16AngelaWright.All Rights Reserved.
• Silverstone, Barbara.The Lighthouse Handbook onVision Impairment
andVision Rehabilitation. MaryAnn Lang, Bruce Rosenthal, Eleanor E.
Faye. Oxford: Oxford UP, 2000. Print.
• Morton, Jill. "BasicColorTheory." Color Matters. N.p., n.d.Web.
Graphics andText: Copyright (c) 1995-2017, J.L.Morton,All rights
reserved.
• “The Science of Color,” Smithsonian Libraries.
• “Red-Green Color Blindness,”Copyright (c) 2006-2016,Colblindor.
• “Checker Shadow Illusion,” 2016Wikipedia.org.
• “Color Illusions,” 2012, BrainDen.

35. PAGE 35 | GRACE HOPPER CELEBRATION 2017
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC17© 2017 IBM Corporation
Resources
• “Designing withColor; a CollaborativeCuriosity,” Pandhi,Charu and
Kraft, Maureen, ©2016 IBM Corporation.
• “Color,” IBM Design Language, © IBM Corporation.
• “Colour Contrast Analyser,” ©The PacielloGroup. All rights reserved.
• Web ContentAccessibility Guidelines 2.0, Copyright © 2016W3C®
(MIT, ERCIM, Keio, Beihang).
• “Use of Color: Understanding SC 1.4.1,” UnderstandingSuccess
Criterion 1.4.1. N.p., 17 Mar. 2016.
• “Contrast (Minimum):Understanding SC 1.4.3.” Understanding
Success Criterion 1.4.3. N.p., 17 Mar. 2016.
• “Optical Illusions Show HowWe See,”TedTalk, Lotto, Beau, 2009.

36. FEEDBACK? RATEAND REVIEWTHE SESSIONON OUR MOBILEAPP
Download the GHC 17 app at http://bit.ly/ghc17app or searchGHC 2017 in the app store
Thank you