Color choices that are accessible

Person's back standing in front of a rainbow gradient

Image source: Unsplash.

By Manisha Gupta

Posted on 09-16-2020

Color is a foundational element in any creative work. When I took the challenge to design the Color Accessibility feature for Adobe Color, it wasn’t a linear path. While I was conducting research and learning more about accessibility, I realized there was no single tool that holistically helps a designer make a choice of colors that are color-blind safe — a choice that impacts roughly 300 million people globally. This made the case for bringing accessibility into Adobe Color even more compelling, and it is one reason why Adobe wants accessibility to be part of every creative’s process right from the beginning of a project.

Why do you need to think about accessibility?

Accessibility as a concept is focused on constantly enabling, rather than limiting, design ideology; it helps users concentrate on the most important aspects of their activity. Reflecting on accessibility in the early stages of design instead of the later stages leads to efficient and effective utilization of both time and money. This is mainly because it minimizes the difference in the digital experience of users with disabilities as compared to users without disabilities.

Let’s understand the optics of color blindness

Via Thanawong/Adobe Stock.

Ninety-nine percent of color-blind people can see color — just not in the same way as someone who isn’t impacted by color blindness. There are three distinct types of color blindness:

Four color wheels stacked in two rows.
The top left color wheel is labeled “normal vision.” The top right color wheel is labeled Deuteranopia. The lower left color wheel is labeled Protanopia. The lower right Tritanopia.

Via рина Кузнецова/Adobe Stock.

  1. Protanopia: Referred to as “red weakness,” this variation of red/green color blindness results in individuals being unable to perceive red light.
  2. Deuteranopia: Also known as “green weakness,” this type of red/green color blindness renders people unable to perceive any green light.
  3. Tritanopia: People who suffer from blue/yellow color blindness have difficulty distinguishing between blue and yellow colors. This form of color blindness is far less common than its red and green counterparts.

The color wheel of the new accessibility tool in Adobe Color targets all these types of color blindness and enables simulation of any theme while taking into account the type of color blindness.

Ensure color themes are color-blind safe

Adobe Color embarked on its journey of supporting color blindness by enabling users to check their color palettes for accessibility with the launch of the color-blind-safe themes feature on Global Accessibility Awareness Day, May 21, 2020. This unique Adobe invention lets users check their color palettes for accessibility on the go.

Step 1: Pick or create a color theme and check for accessibility

Adobe Color interface showing a color palette with five colors. The five colors appear as circles or pucks within a color spectrum wheel. The interface shows the Create page within Adobe Color and along the sub navigation bar are the options: Color Wheel, Extract Theme, Extract Gradient, Accessibility Tools. Color Wheel is selected.

Launch Adobe Color and either start with the color wheel in the Create tab to build a customized color theme, or choose one of the curated color themes from the Explore section, then check for accessibility.

Step 2: Check pucks on color wheel for any color conflicts

Adobe Color interface with the color blind safe feature opens showing the color palette with five colors, which are labeled left to right as A, B, C, D, and E. The five colors appear in a color spectrum wheel with A and B highlighted with a white line between them indicating a color conflict. Text on the left notes that the colors A and B are in conflict. At the bottom of the interface screenshot, the color palette is show under Color Blind Simulator, which repeats the color palette simulated for Deuteranopia, Protanopia, and Tritanopia. Colors A and B have a white line in the middle to indicate a color conflict. The interface shows the Create page within Adobe Color and along the sub navigation bar are the options: Color Wheel, Extract Theme, Extract Gradient, Accessibility Tools. Accessibility Tools is selected.

Through the accessibility color wheel, problematic color combinations are flagged by conflict lines, highlighting the swatches of color that could be indistinguishable to someone with color blindness. This allows designers to create color palettes containing five swatches that are distinct from each other.

Step 3: Move the pucks around with the help of conflict guides

Adobe Color interface with the color blind safe feature open showing a color palette with five colors, which are labeled left to right as A, B, C, D, and E. The five colors appear in a color spectrum wheel. There are three white dashed lines or Conflict Guides which divide the color spectrum wheel. They indicate the direction in which the color swatch circles or pucks should be moved to make the colors distinct enough to solve the conflicts.  Text on the left notes that the colors A and B are in conflict. Below the five color palette, each color has a color mode slide for Red, Green, Blue, and brightness. The interface shows the Create page within Adobe Color and along the sub navigation bar are the options: Color Wheel, Extract Theme, Extract Gradient, Accessibility Tools. Accessibility Tools is selected.

To fix a color conflict and build themes safe for color blindness, designers can move the pucks in the direction indicated by conflict guides or try altering the RGB level or brightness.

Step 4: Getting it right

Adobe Color interface with the color blind safe feature open showing a color palette with five colors, which are labeled left to right as A, B, C, D, and E. The five colors appear in a color spectrum wheel with new shades of colors for A and B, which are no longer highlighted or in conflict. Text on the left notes “no conflict are found. Swatches are color blind safe.” The color conflict was solved by moving away the color swatch circles or pucks of A and B, and making the color shades more distinct from each other. The white line indicating color conflict is gone to affirm that the conflict is solved on the color wheel as well as in the color blind simulator. At the bottom of the interface screenshot, the color palette is show three times with the Color Blind Simulator, which repeats the color palette simulated for Deuteranopia, Protanopia, and Tritanopia. The interface shows the Create page within Adobe Color and along the sub navigation bar are the options: Color Wheel, Extract Theme, Extract Gradient, Accessibility Tools. Accessibility Tools is selected.

Once the color conflicts are solved, designers can check how the theme will appear to a color-blind user. The system also affirms whether the theme is color-blind safe when saving.

Step 5: Proactively choose color-blind-safe themes

As a next step, Adobe Color will be launching versatile color-blind-friendly palettes as a part of the Explore section, where designers fetch color themes from community resources like Behance and Adobe Stock.

Adobe Color interface with color blind safe themes

Examples of accessibility at its peak

Example 1: Slack offers its users special color-blind accessible themes that alter the colors of the entire user interface.

Screenshot of Slack color themes

Field with a hill and a large, vertical rectangular signage that shows six icons and large writing Shelby Farms Park.

Designed by David Gibson, Two Twelve.

Royal Children’s Hospital (Melbourne) wayfinding solution via Dexigner.

Example 2: Since icons and visual designs express the core ideas and intents of brands and products, the inclusion of accessible color palettes is vital for brand and product success.

Example of what to do and not to do with color schemes.

Pull Quote

We have to be proactive to make sure that our designs reach a broad audience of people, not just people who look and act like us.

Nathan Curtis, design system advocate and founder, EightShapes

Adobe MAX 2020

Location: Wherever you are
Virtual Conference: Oct 20 - 22

Register now

Topics: Design, Creativity, Insights & Inspiration, Creative Cloud,

Products: