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.
It’s 2020, and I think we’d all benefit from being a little more vulnerable with each other.
— Kurt Varner (@kurtvarner) January 7, 2020
I’ll go first:
I’m a color-blind designer.
I’ve hidden this for most of my career. I thought no one would ever hire me if they knew I couldn’t see colors correctly.
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.
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