Making Colors Visible for All

50 %
50 %
Information about Making Colors Visible for All

Published on February 28, 2014

Author: mashoori



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

Making Colors Visible for ALL @MaryamAshoori Feb 2014


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

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 Caucasian (8%), one in 20 Asian (5%), and one in 25 African (4%) males.* *

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: What People With Regular Vision See *.Ishihara Test for Color Blindness What Red-Green Color Blind People See

Step 2: Test if your computer is color blind Test for computer color accuracy Example: *.Ishihara Test for Color Blindness

Step 3: Test your design for color accessibility • Colorblind Simulator • Colorblind Web Page Filter • Vischeck • Accessibility Validation in Photoshop • WAVE • Sim Daltonism (for Mac) • Contrast-A: Accessible Color Combinations

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

Step 4: Follow the color accessibility guidelines • Web Content Accessibility Guidelines (WCAG) 2.0 Guideline 1.4 : • Your company‟s Software Accessibility Checklist • Color Universal Design Organization (CUDO)

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

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

Colorblind barrier-free color palette *

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-type

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.

• 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

Add a comment

Related presentations

Related pages

Making Colors Visible for All - Education - documents

Making Colors Visible for ALL @MaryamAshoori Feb 2014 ... SEO and PPC for translators: making yourself visible on the web with search engine marketing ...
Read more

Making Your Web Colors Visible For All – Five Color ...

Jennifer takes a look at four web sites and an iPhone app to help designers and developers test web site color accessibility.
Read more

Making Your Web Colors Visible For All – Five Color ...

Making Your Web Colors Visible For All – Five Color Accessibility Tools. February 12, 2010
Read more

What Wavelength Goes With a Color? - NASA LaRC SD EPO

What Wavelength Goes With a Color? ... , appears green because all of the colors in the visible part of the spectrum are absorbed into the leaves of the ...
Read more

Visible Light Waves - NASA Science

Visible Light Waves. Visible light ... see is the color of light reflected. All other ... in true color are greatly exaggerated here, making it ...
Read more

Making Colors - How Light Works | HowStuffWorks

Learn about making colors and the phenomenon of light. NOW; ... This wouldn't happen unless white light were a mixture of all of the colors of the visible ...
Read more

Primary Colors - Molecular Expressions

All other colors of the visible light spectrum can be ... when all three of the subtractive primary colors are combined, all of the additive ...
Read more

Making Thinking Visible: How to Promote Engagement ...

MAKING THINKING VISIBLE: How to Promote Engagement, Understanding and Independence for All Learners ...
Read more

Adobe Digital Enterprise Platform * Making objects visible ...

Making objects visible, invisible, ... you can apply the Visible option to all of the objects in the form. Visible is the default presence setting for ...
Read more