Color choices that are accessible

Person's back standing in front of a rainbow gradient

Image source: Unsplash.

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.

Protanopia: Referred to as “red weakness,” this variation of red/green color blindness results in individuals being unable to perceive red light.
Deuteranopia: Also known as “green weakness,” this type of red/green color blindness renders people unable to perceive any green light.
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.

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

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

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

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.

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.