1) The document discusses making designs and information accessible for people with color blindness, as about 8% of men and 0.5% of women experience some form of color blindness. 2) It provides steps to test for color blindness, ensure computer displays accurately show colors, and test designs using color blindness simulators. 3) Guidelines are presented for using high color contrast, avoiding sole reliance on color to convey information, and choosing colors that are distinguishable to those with common types of color blindness.

1. Making Colors
Visible for ALL
@MaryamAshoori
Feb 2014

2. RED

3. Coca-Cola
RED

5. Different readings of the same color

7. We perceive what we expect.
Our perception is biased by our
experience, the context, and our goals.
“In visual perception a color is
almost never seen as it really
is[…] This fact makes color the
most relative medium in art.”
Joseph Alberts, Interaction of Color, 1963

8. Let‟s get back to our „RED‟ square

9. 99% of all colorblind people are redgreen color blind
"Red-green" color
blindness is observed
among one out of twelve
Caucasian (8%), one in
20 Asian (5%), and one in
25 African (4%) males.*
* http://jfly.iam.u-tokyo.ac.jp/color/

10. Red-green color blind
Non color blind
Deuteranope
(green cone cells defective)

11. Why does that matter?
1 in 12 men (8%)*
* NHS Choices
1 in 200 women (0.5%)

12. Step 1: Test if you are color blind
Take the online test:
http://www.color-blindness.com/ishihara-38-plates-cvd-test/
What People With
Regular Vision See
*.Ishihara Test for Color Blindness
What Red-Green
Color Blind People See

13. Step 2:
Test if your computer is color blind
Test for computer color accuracy
http://goo.gl/lJi5bk
Example:
*.Ishihara Test for Color Blindness

14. Step 3:
Test your design for color accessibility
• Colorblind Simulator
http://aspnetresources.com/tools/colorBlindness
• Colorblind Web Page Filter
http://colorfilter.wickline.org/
• Vischeck
http://www.vischeck.com/vischeck/vischeckImage.php
• Accessibility Validation in Photoshop
• WAVE
http://wave.webaim.org/
• Sim Daltonism (for Mac)
http://michelf.ca/projects/sim-daltonism/
• Contrast-A: Accessible Color Combinations
http://www.dasplankton.de/ContrastA/

15. Print a copy of the screen in black
and white to verify color is not the
only way to identify or distinguish
information.
*. IBM Software Accessibility Checklist

16. Step 4:
Follow the color accessibility guidelines
• Web Content Accessibility Guidelines (WCAG) 2.0
Guideline 1.4 : http://www.w3.org/TR/WCAG20/#visual-audio-contrast
• Your company‟s Software Accessibility Checklist
• Color Universal Design Organization (CUDO)
http://jfly.iam.u-tokyo.ac.jp/color/

17. Make texts and objects as
THICK or
BIG
possible.
as

18. Example:
Choosing the wrong colors
for a chart can make it
literally unreadable for a
colorblind user.
6
4
2
Series 1
Series 3
Add a little pattern or texture
to different parts of a chart to
make for easier visual
differentiation.
6
4
0
2
0
Series 1
Series 3

19. Example:
When designing forms, avoid labeling required fields only
with colored text

20. Colorblind barrier-free color palette
* http://jfly.iam.u-tokyo.ac.jp/color/

21. Avoid using pure red
Use vermilion or orange instead
(255,0,0)
(213,94,0)
(230,159,0)

22. Avoid using pure green
Use Bluish Green instead
(0,255,0)
(0,158,115)

23. Avoid combination of colors with
low saturation or low brightness.

24. Colorblind users can perceive
brightness shifts
Non colorblind
Protanopia-type

25. Avoid the situation where texts and
objects are obscured with the
background.
Hi There!
Non colorblind
Deuturanopia-type

26. Keep the number of colors to a
minimum
Use combinations of different symbols with a few, vivid
colors rather than a single symbol with various colors.



27. When color matters, include color
names and show examples
*. H&M

28. Avoid using complicated color
names
*. Banana Republic

29. What if the hover doesn‟t work?
*. Gap.

30. Avoid color-specific instructions
Click the green button to
purchase!
Label your buttons clearly and
reference them in the site copy
by function, not color, to avoid
confusion.
Amazon.ca

31. • When color customization is
supported, provide a variety of color
selections capable of producing a range of
contrast levels.

32. Related resources from WCAG 2.0 guidelines :
•
•
•
•
•
•
•
•
•
•
Lighthouse International: Effective Color Contrast
Vischeck
Internetworking: Designing for the Color-Challenged: A Challenge
AWARE Color Laboratory
Colorblind Web Page Filter
Firelily Designs: Color Vision, Color Deficiency
Wikipedia: Color Blindness
Microsoft: Can Color-Blind Users See Your Site?
BT Inclusive Communication: Choosing safe colours
Causes of Color: How do people inherit colorblindness? How often?:
Genetics
• How to make figures and presentations that are friendly to
Colorblind people
• The Color Tutor application

33. Making Colors Visible for
ALL
@MaryamAshoori
Feb 2014