Making Colors Visible for All

Making Colors Visible for ALL

@MaryamAshoori Feb 2014

RED

Coca-Cola RED

Different readings of the same color

“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

We perceive what we expect.Our perception is biased by our experience, the context, and our goals.

Let’s get back to our ‘RED’ square

"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/

99% of all colorblind people are red-green color blind

Non color blind

Deuteranope

Red-green color blind

(green cone cells defective)

Why does that matter?

1 in 12 men (8%)*

1 in 200 women (0.5%)

* NHS Choices

Step 1: Test if you are color blind

What People With Regular Vision See

What Red-Green Color Blind People See

*.Ishihara Test for Color Blindness

Take the online test: http://www.color-blindness.com/ishihara-38-plates-cvd-test/

Step 2: Test if your computer is color blind

*.Ishihara Test for Color Blindness

Test for computer color accuracy http://goo.gl/lJi5bk

Example:

• Colorblind Simulatorhttp://aspnetresources.com/tools/colorBlindness

• Colorblind Web Page Filter http://colorfilter.wickline.org/

• Vischeckhttp://www.vischeck.com/vischeck/vischeckImage.php

• Accessibility Validation in Photoshop• WAVEhttp://wave.webaim.org/

• Sim Daltonism (for Mac)http://michelf.ca/projects/sim-daltonism/

• Contrast-A: Accessible Color Combinationshttp://www.dasplankton.de/ContrastA/

Step 3: Test your design for color accessibility

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

• 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/

Step 4: Follow the color accessibility guidelines

Make texts and objects as

THICK or

BIG as

possible.

0123456

Series 1Series 3

Choosing the wrong colors for a chart can make it literally unreadable for a colorblind user.

Example:

Add a little pattern or texture to different parts of a chart to make for easier visual differentiation.

0

1

2

3

4

5

6

Series 1Series 3

When designing forms, avoid labeling required fields only with colored text

Example:

* http://jfly.iam.u-tokyo.ac.jp/color/

Colorblind barrier-free color palette

Avoid using pure red

Use vermilion or orange instead

(230,159,0)(213,94,0)(255,0,0)

Avoid using pure green

Use Bluish Green instead

(0,158,115)(0,255,0)

Avoid combination of colors with low saturation or low

brightness.

Colorblind users can perceive brightness shifts

Protanopia-typeNon colorblind

Avoid the situation where texts and objects are obscured with

the background.

Hi There!

Deuturanopia-typeNon colorblind

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.

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 the site copy by function, not color, to avoid confusion.

Amazon.ca

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

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

Making Colors Visible for ALL

@MaryamAshoori Feb 2014