EX07 - Color for Accessibility

Considerations beyond 20/20

Designing with color requires a desire to see the world through challenged eyes.

Updated January 07, 2020

Few things in the world can consistently generate an opinion quite like color — specifically the selection of a color. A query regarding your favorite color was likely one of the first tests that society gave you as a child. We assume that everyone has some experience with color, but not all experiences are the same.

While many of us have historical references to color and specific preferences about color, everyone experiences color differently.

For many, we attribute differences to our past personal experiences and associations with color. Whether it’s your favorite team or your least favorite country, colors and the combination of colors can impact how we react to colors.

Still, there are a significant number of people who SEE colors differently because their vision is impacted by one or more of several vision deficiencies.

Color-examples Source: newpragmatic.com

Specific awareness of the entire spectrum of impairments isn’t as important as knowing how to consider these issues when designing new experiences. In Color for Everyone, I outline how to use contrast and supplemental information to ensure that users who struggle with color aren’t left behind.

Unlike other areas of design, accessibility has established best practices that should be consulted and followed as you work through projects. With that in mind, I have included a link to the accessibility guidelines that have been produced by W3C. In design, any time you have documentation provided, you should both make a note of the material — and make use of it.

Resources for review

Article Source/Author
Color for Everyone New Pragmatic
Considering Color Blindness Econsultancy
What is Color Contrast A11y Project
Web Content Accessibility Guidelines W3C

Tools to use

Tool Purpose
Colorable Web-based contrast lab
Color Oracle Color blindness simulator
Get Stark Accessibility plugin for Figma, Sketch, and Adobe XD
No Coffee Complex vision simulator for Google Chrome

Exercise

The following assignment is broken down into three distinct units. These units will test your ability to identify vision deficiencies, utilize tools to assist in making corrections, and your creativity in altering existing designs to the benefit of your users.

Part one: Install the Color Oracle app and use it to see how color vision deficencies impact the user experience of three different websites that you often use.

Using the examples provided in this Figma file, identify the color vision deficiencies being displayed. Rather than merely guessing, utilize the Color Oracle tool to find your answer.

Part two: Utilize the Stark plug-in to correct contrast issues that are present in the design provided.

Part three: Update the designs presented with supplemental information to make them usable for audiences with color vision deficiencies.

Once complete, update your Program Journal with links to the assets produced for this exercise. Post your Journal in the #Feedback-Loop channel for review.

///

Up next Color for Action

Receive daily feedback and weekly meetings with Chris Courtney by signing up for monthly mentorship today!

Sign up today!