Making Colors
Visible for ALL
@MaryamAshoori
Feb 2014
RED
Coca-Cola
RED
Different readings of the same color
We perceive what we expect.
Our perception is biased by our
experience, the context, and our goals.

“In visual perception...
Let‟s get back to our „RED‟ square
99% of all colorblind people are redgreen color blind
"Red-green" color
blindness is observed
among one out of twelve
Cauc...
Red-green color blind
Non color blind

Deuteranope
(green cone cells defective)
Why does that matter?
1 in 12 men (8%)*

* NHS Choices

1 in 200 women (0.5%)
Step 1: Test if you are color blind
Take the online test:
http://www.color-blindness.com/ishihara-38-plates-cvd-test/

Wha...
Step 2:
Test if your computer is color blind
Test for computer color accuracy
http://goo.gl/lJi5bk

Example:

*.Ishihara T...
Step 3:
Test your design for color accessibility
• Colorblind Simulator
http://aspnetresources.com/tools/colorBlindness

•...
Print a copy of the screen in black
and white to verify color is not the
only way to identify or distinguish
information.
...
Step 4:
Follow the color accessibility guidelines

• Web Content Accessibility Guidelines (WCAG) 2.0
Guideline 1.4 : http:...
Make texts and objects as

THICK or

BIG
possible.

as
Example:
Choosing the wrong colors
for a chart can make it
literally unreadable for a
colorblind user.
6

4
2

Series 1
Se...
Example:
When designing forms, avoid labeling required fields only
with colored text
Colorblind barrier-free color palette

* http://jfly.iam.u-tokyo.ac.jp/color/
Avoid using pure red
Use vermilion or orange instead

(255,0,0)

(213,94,0)

(230,159,0)
Avoid using pure green
Use Bluish Green instead

(0,255,0)

(0,158,115)
Avoid combination of colors with
low saturation or low brightness.
Colorblind users can perceive
brightness shifts

Non colorblind

Protanopia-type
Avoid the situation where texts and
objects are obscured with the
background.

Hi There!

Non colorblind

Deuturanopia-typ...
Keep the number of colors to a
minimum
Use combinations of different symbols with a few, vivid
colors rather than a single...
When color matters, include color
names and show examples

*. H&M
Avoid using complicated color
names

*. Banana Republic
What if the hover doesn‟t work?

*. Gap.
Avoid color-specific instructions
Click the green button to
purchase!

Label your buttons clearly and
reference them in th...
• When color customization is
supported, provide a variety of color
selections capable of producing a range of
contrast le...
Related resources from WCAG 2.0 guidelines :
•
•
•
•
•
•
•
•
•
•

Lighthouse International: Effective Color Contrast
Visch...
Making Colors Visible for
ALL

@MaryamAshoori
Feb 2014
Making Colors Visible for All
Making Colors Visible for All
Upcoming SlideShare
Loading in …5
×

Making Colors Visible for All

950
-1

Published on

This chart is to raise awareness about designing for colorblind audience and provides some recommendations to increase the accessibility of design for colorblind users.

Colorblindness is a decreased ability to see color or tell colors apart from one another. Approximately one in every twelve men and one in 200 women in the world are colorblind."

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
950
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • When you think of the color “red,” think about how many completely different color samples could match your definition of red.
  • How about the Coca-Cola Red?
  • That’s the exact same ‘RED’!
  • Red appears more brilliant against a black background, but lifeless against an orange background.
  • Colorblindness is actually a decreased ability to see color, or a decreased ability to tell colors apart from one another. A colorblind has only two different color receptors (cones) compared to three with normal color vision.
  • Don’t rely solely on color - Avoid the situation where important information is conveyed only in the form of color.
  • For color-coded text, use bold fonts such as ArialorHelvetica, rather than thin Times.
  • It’s safer to use a symbol cue like the asterisk which is color-independent.
  • it’s always better to add something else visually in addition to color shifts. So if you switch colors on a hover, make sure the two colors are very different in their relative brightness. You can switch from a dark brown to a bright green, just not from a dark brown to a dark green. Keep contrast not only in hue but also inbrightness.
  • For example, red characters on green backgrounds is unreadable for colorblinds. Use either bright texts/objects over dark backgrounds, or vice versa.
  • be sure to reference the name of the color in the description of the product.
  • Making Colors Visible for All

    1. 1. Making Colors Visible for ALL @MaryamAshoori Feb 2014
    2. 2. RED
    3. 3. Coca-Cola RED
    4. 4. Different readings of the same color
    5. 5. 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
    6. 6. Let‟s get back to our „RED‟ square
    7. 7. 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/
    8. 8. Red-green color blind Non color blind Deuteranope (green cone cells defective)
    9. 9. Why does that matter? 1 in 12 men (8%)* * NHS Choices 1 in 200 women (0.5%)
    10. 10. 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
    11. 11. Step 2: Test if your computer is color blind Test for computer color accuracy http://goo.gl/lJi5bk Example: *.Ishihara Test for Color Blindness
    12. 12. 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/
    13. 13. 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
    14. 14. 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/
    15. 15. Make texts and objects as THICK or BIG possible. as
    16. 16. 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
    17. 17. Example: When designing forms, avoid labeling required fields only with colored text
    18. 18. Colorblind barrier-free color palette * http://jfly.iam.u-tokyo.ac.jp/color/
    19. 19. Avoid using pure red Use vermilion or orange instead (255,0,0) (213,94,0) (230,159,0)
    20. 20. Avoid using pure green Use Bluish Green instead (0,255,0) (0,158,115)
    21. 21. Avoid combination of colors with low saturation or low brightness.
    22. 22. Colorblind users can perceive brightness shifts Non colorblind Protanopia-type
    23. 23. Avoid the situation where texts and objects are obscured with the background. Hi There! Non colorblind Deuturanopia-type
    24. 24. 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.  
    25. 25. When color matters, include color names and show examples *. H&M
    26. 26. Avoid using complicated color names *. Banana Republic
    27. 27. What if the hover doesn‟t work? *. Gap.
    28. 28. 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
    29. 29. • When color customization is supported, provide a variety of color selections capable of producing a range of contrast levels.
    30. 30. 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
    31. 31. Making Colors Visible for ALL @MaryamAshoori Feb 2014
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×