Accessibility Labs

How We See Color: Colorblindness and Inclusive Design

Written in Resources

Time to Read:

5–7 minutes

Introduction

Imagine trying to decipher a graph where information is conveyed only with color. What if the colors appear to similarly? For millions, this isn’t a hypothetical, but a daily reality. Color isn’t just decoration, it’s also a language. However, not everyone speaks it the same way.

For those with color vision deficiencies, the palette is altered, sometimes dramatically. This article explores the science behind color perception and its various forms. We also share inclusive design tips and simulation tools. When designing with colorblindness in mind, you communicate visuals effectively.

How We Perceive Color

For most people, color vision depends on three types of cone cells in the retina, each sensitive to a different range of light: red, green, and blue. These cones work together to create the full spectrum of colors we perceive, a condition known as Trichromacy.

However, not everyone sees color in the same way. People with color vision deficiencies experience differences in cone functionality, affecting how they distinguish certain colors.

Diagram representing Trichromacy, an eye connected to three color channels: Red, Green, and Blue. Beside it is a rainbow color wheel with Red, Orange, Yellow, Green, Blue, and Purple.

Types of Colorblindness

One of the most common types of colorblindness occurs when only two of the three cone types function properly, a condition known as Dichromacy. The specific type depends on which cone is affected:

  • Deuteranopia: Missing green cone function
  • Protanopia: Missing red cone function
  • Tritanopia: Missing blue cone function (rare)
an infographic of dichromacy color blindness types and color wheels. Deuteranopia and Protanopia are primarily Blue and Yellow shades while tritanopia features magenta and cyan shades.
Diagram representing forms of Dichromacy: Deuteranopia, Protanopia, and Tritanopia. Each type is displayed with their primary two color channels. Adjacent color wheels simulate the rainbow wheel in the corresponding colorblindness type.

Some individuals have partially functioning cones, leading to milder forms of color vision deficiency, also known as Anomalous Trichromacy:

  • Protanomaly: Reduced sensitivity to red light
  • Deuteranomaly: Reduced sensitivity to green light (the most common type)
  • Tritanomaly: Reduced sensitivity to blue light (very rare)
an infographic of Anomalous Trichromacy color blindness types and color wheels. Color wheels are similar to full spectrum rainbows, but appear less saturated with blues and purples and greens and yellows appearing more similarly.
Diagram representing forms of Anomalous Trichromacy: Deuteranomaly, Protanomaly, and Tritanomaly. Each type has a striped cone representing partial functionality. Adjacent color wheels simulate the rainbow as perceived by these colorblindness types.

In extremely rare cases, some individuals have only one functioning cone, resulting in Monochromacy, where they see the world in shades of gray.

At the other end of the spectrum, a small number of people (primarily women) have a fourth type of cone, making them Tetrachromats. These individuals can perceive millions more colors than the average person.

drawing of a scarlet macaw perched on a branch with a sprout

Fun Animal Fact:

While rare in humans, tetrachromatic vision is common in birds, reptiles, and certain marine animals like mantis shrimp, which can have up to 16 types of cones. This extraordinary ability gives them a vivid, multifaceted perception of color.

Colorblindness Causes

Color vision deficiencies are more common than many people realize, affecting approximately 300 million people. Because color vision is linked to genes on the X chromosome, men are more frequently affected than women. Roughly 1 in 12 men (8%) and 1 in 200 women have a form of colorblindness. However, not all cases are genetic. Other causes include:

  • Eye diseases such as diabetes or multiple sclerosis
  • Medications or chemical exposure that damage retinal cells
  • Injuries affecting the retina or brain
  • Aging, as color perception naturally declines after age 70

How Screens Create Color

While the human eye interprets color through cone cells, screens create color in a similar way. TVs, computers, and phone screens use pixels, each made up of red, green, and blue (RGB) sub-pixels. By adjusting the intensity of these three light sources, screens can simulate a broad spectrum of colors, much like our eyes do.

Viewers with color vision deficiencies will experience screen colors differently, which is why thoughtful design choices are crucial for digital accessibility.

Drawing of a PC monitor with a yellow animal figure, overlapped is a magnifying glass zooming in on red green and blue subpixels

Designing for Colorblind Accessibility

Don’t Rely on Color Alone

Relying on color to convey information hinders a significant portion of your audience. To those with color vision deficiencies, colors can appear either poorly designed or worse misinterpreted. By integrating text labels, icons, and patterns, you create a design that communicates clearly to everyone.

  • Use Text Labels or Icons: For instance, in charts or forms, include clear labels or symbols alongside colors.
  • Incorporate Patterns and Textures: Adding patterns to graphs and backgrounds can help differentiate elements without relying solely on hue.
A pie chart with three categories, each represented by different visual styles for accessibility. Category 1 is shown in a solid light blue color, Category 2 has a dark blue and light blue checkered pattern, and Category 3 features orange and white horizontal stripes. A legend on the right labels each category with corresponding patterns. This design ensures clear differentiation for individuals with color blindness.

Choose a Colorblind-Friendly Palette

Color palettes aren’t just about aesthetics. Quality design means selecting a palette that works for everyone. Choose high-contrast colors and avoid problematic pairings. With both in mind, your designs remain vibrant and legible, regardless of color perception:

  • Avoid Problematic Pairings: Commonly conflicting pairs include red-green, blue-purple, red-black, white-pastel, and light green-yellow. These combinations may merge into indistinct shades to those with color deficiencies.
  • Leverage High Contrast: If you must use colors like red and green, adjust their brightness or saturation so they differ in value as well as hue. Text benefits from being presented in a contrast ratio of 4.5:1 and above while graphical elements benefit from presenting 3:1 and above.
Comparison Slider Infographic displaying a cursive ‘hello’ in various color combinations: Red–Orange–Green, White–Pastel, Yellow–Orange–Light Green, Purple–Blue, and Red–Black. The right side applies a Deuteranopia (red-green) filter, revealing how each combination becomes harder to read.

Design Toolkit

Design validation is key to accessibility. Use tools and simulations to test how your design appears through the eyes of someone with color blindness. Simulations allow you to fine-tune your work, ensuring that each visual element is effective.

The following tools are helpful in understanding if your designs are too color-reliant:

  • Chroma simulates colorblindness in real-time with a window overlay. This tool is ideal for video and game testing. Chroma simulates during application interaction and includes screenshot functionality. Chroma leverages Color Oracle’s algorithm.
  • Color Oracle is renowned for its simulation accuracy. This application simulates Protanopia, Deuteranopia, Tritanopia, and Grayscale on your screen. This tool is ideal for quick image testing as the simulation ends after interaction.
  • Color Contrast Analyzer Select foreground and background colors to instantly determine contrast ratios. This tool also provides colorblindness simulations for the color pairing.
  • Coblis Color Blindness Simulator is a web-based simulator. Uploaded Images can be viewed under 8 distinct color vision deficiency filters.
  • Color Brewer is a webpage featuring configurable colorblind safe palettes. The tool is intended for cartographers, but applicable to many use cases.
  • Photoshop’s built-in simulation tools ‘Proof Setup’ to preview your design as seen by those with Protanopia and Deuteranopia.
  • Most photo and illustration applications offer the ability to adjust saturation values to 0, allowing a quick grayscale preview.

Colorblind Testing Tip

Although monochromacy is a rare form of color vision deficiency, applying a grayscale filter is an excellent way to evaluate your design. It highlights the lightness and darkness of visual elements, making it easier to assess overall contrast. Strong contrast translates across all forms of color vision deficiency, making grayscale essential in accessibility testing.

Additional Resources

Tags:

More posts