← Back to blog
Accessibility

Designing for Color Blindness: A Web Developer's Guide

color-blindnessa11ydesign

Color is one of the most powerful tools in a designer's toolkit. It conveys meaning, creates hierarchy, and evokes emotion. But for roughly 300 million people worldwide — about 8% of men and 0.5% of women — color perception works differently. If your design relies on color alone to communicate information, a significant portion of your users might miss critical content.

As someone who builds accessibility tools, I think about this constantly. Color blindness is not an edge case. It is a common condition that affects a meaningful percentage of every audience. In this post, I will explain the types of color vision deficiency, show practical techniques for inclusive design, and point you to tools for testing your work.

Understanding Color Blindness

Color blindness, more accurately called color vision deficiency (CVD), occurs when the cone cells in the retina do not function typically. There are three types of cone cells, each sensitive to different wavelengths: short (blue), medium (green), and long (red). When one type is missing or malfunctioning, certain colors become difficult or impossible to distinguish.

Red-Green Color Blindness

Red-green deficiency is by far the most common type, affecting about 8% of men of Northern European descent.

Protanopia (about 1% of males) involves a complete absence of red cone cells. People with protanopia see reds as dark, and have difficulty distinguishing red from green, and red from brown. Red appears much darker than it does to people with typical color vision — a bright red may look nearly black.

Protanomaly (about 1% of males) is a milder form where red cones are present but shifted in sensitivity. Reds appear less vivid and more greenish.

Deuteranopia (about 1% of males) involves a complete absence of green cone cells. It is the most common form of color blindness. People with deuteranopia have difficulty distinguishing green from red, and green from brown. Unlike protanopia, reds do not appear darkened.

Deuteranomaly (about 5% of males) is the milder version and the most common type of CVD overall. Greens appear more reddish, making it hard to distinguish subtle differences between reds, greens, yellows, and browns.

Blue-Yellow Color Blindness

Tritanopia is extremely rare (affecting roughly 0.01% of the population, equally across sexes). People with tritanopia cannot distinguish between blue and green, or between yellow and violet. The world appears in shades of pink and teal.

Tritanomaly is the milder form, where blue appears greener and it becomes harder to distinguish yellow from red.

Monochromacy

Achromatopsia — complete color blindness — is very rare (about 1 in 30,000). People with this condition see only in shades of gray. It is often accompanied by light sensitivity and reduced visual acuity.

The Golden Rule: Never Rely on Color Alone

This is WCAG Success Criterion 1.4.1 (Use of Color), and it is the single most important principle for designing with color blindness in mind. Color should supplement information, not be the sole carrier of it.

Bad: Color as the Only Indicator

Consider a form where invalid fields are highlighted with a red border:

<!-- Bad: relies on color alone -->
<input type="email" style="border-color: red;" />
<span style="color: red;">Invalid email</span>

A user with protanopia might not notice the red border at all. The field looks the same as a valid field.

Good: Color Plus Additional Cues

<!-- Good: color + icon + text -->
<div class="field-error">
  <input type="email" class="border-red-500 border-2" aria-describedby="email-error" />
  <span id="email-error" class="text-red-600 flex items-center gap-1">
    <svg aria-hidden="true"><!-- error icon --></svg>
    Please enter a valid email address
  </span>
</div>

Now the error is communicated through color, an icon, and descriptive text. Even if the user cannot perceive the red color, they still get clear feedback.

Common Violations

Here are places where color-only indicators frequently appear:

  • Status indicators: Green for success, red for error, yellow for warning — without labels or icons
  • Charts and graphs: Line charts or pie charts where color is the only way to identify each data series
  • Links: Links styled only with color (no underline) within body text
  • Required fields: Red asterisks that are only red, without a "required" label
  • Form validation: Red borders without error messages
  • Navigation: Current page indicated only by color change

Contrast Ratios

WCAG defines minimum contrast ratios to ensure text is readable for people with low vision and color deficiency:

  • Normal text (under 18pt or 14pt bold): minimum 4.5:1 contrast ratio (AA), 7:1 for AAA
  • Large text (18pt+ or 14pt+ bold): minimum 3:1 (AA), 4.5:1 for AAA
  • Non-text elements (icons, borders, form controls): minimum 3:1 against adjacent colors

You can check contrast ratios with tools like the WebAIM Contrast Checker or directly in Chrome DevTools (inspect an element and look at the color contrast information in the Styles panel).

When designing for color blindness specifically, pay attention to the contrast between colors you use together — not just against the background. Two colors might both have sufficient contrast against white but be nearly indistinguishable from each other for someone with deuteranopia.

Color Palette Strategies

Use a CVD-Safe Palette

Some color combinations work well for most types of color vision deficiency. The key is choosing colors that differ not just in hue but also in lightness and saturation.

Safe combinations:

  • Blue and orange (distinguishable in all common forms of CVD)
  • Blue and red (usually distinguishable, though reds may appear darker for protanopia)
  • Dark blue and light yellow
  • Purple and green (with sufficient lightness difference)

Problematic combinations:

  • Red and green (the classic problem — avoid this pairing for conveying meaning)
  • Green and brown
  • Green and yellow (especially for deuteranopia)
  • Red and brown
  • Blue and purple (can be difficult for tritanopia)

Color-Universal Design (CUD)

The Color Universal Design organization recommends a specific set of eight colors that are distinguishable for all common types of CVD:

| Color | Hex | Usage | |-------|-----|-------| | Black | #000000 | Text, borders | | Orange | #E69F00 | Warning, highlight | | Sky blue | #56B4E9 | Info, links | | Bluish green | #009E73 | Success | | Yellow | #F0E442 | Attention | | Blue | #0072B2 | Primary | | Vermillion | #D55E00 | Error, danger | | Reddish purple | #CC79A7 | Accent |

These colors maintain adequate contrast and distinguishability across protanopia, deuteranopia, and tritanopia.

Vary Lightness, Not Just Hue

When you need multiple colors in a data visualization or UI, ensure they differ significantly in lightness (brightness), not just hue. Two colors with the same lightness but different hues can be indistinguishable to someone with CVD. Two colors with different lightness values remain distinguishable even when the hue difference is lost.

/* These have different hues but similar lightness — problematic */
.series-1 { color: #22c55e; } /* green, ~48% lightness */
.series-2 { color: #ef4444; } /* red, ~48% lightness */

/* Better: different hues AND different lightness */
.series-1 { color: #166534; } /* dark green, ~25% lightness */
.series-2 { color: #fca5a5; } /* light red, ~78% lightness */

Patterns, Icons, and Textures as Alternatives

When color is used to distinguish data series in charts or categories in a UI, always provide a secondary visual channel.

Charts and Graphs

Instead of relying solely on colored lines or bars, add:

  • Patterns: Stripes, dots, crosshatches for different data series
  • Shape markers: Circles, squares, triangles on data points
  • Direct labels: Label each data series directly on the chart instead of using a separate color legend
  • Different line styles: Solid, dashed, dotted for line charts

Many charting libraries support these options. In Chart.js, for example:

datasets: [
  {
    label: 'Revenue',
    borderColor: '#0072B2',
    borderDash: [],          // solid line
    pointStyle: 'circle',
    data: [...]
  },
  {
    label: 'Expenses',
    borderColor: '#D55E00',
    borderDash: [5, 5],      // dashed line
    pointStyle: 'triangle',
    data: [...]
  }
]

Status Icons

Pair every color-coded status with an icon:

function StatusBadge({ status }: { status: 'success' | 'warning' | 'error' }) {
  const config = {
    success: { color: 'text-green-700 bg-green-100', icon: '✓', label: 'Success' },
    warning: { color: 'text-yellow-700 bg-yellow-100', icon: '⚠', label: 'Warning' },
    error: { color: 'text-red-700 bg-red-100', icon: '✕', label: 'Error' },
  };

  const { color, icon, label } = config[status];

  return (
    <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-sm ${color}`}>
      <span aria-hidden="true">{icon}</span>
      {label}
    </span>
  );
}

The icon and text label ensure the status is communicated regardless of color perception.

Testing Tools and Simulators

You do not need to guess how your design looks to people with CVD. Use simulation tools.

Browser-Based Tools

Chrome DevTools has a built-in CVD simulator. Open DevTools, press Ctrl+Shift+P (Cmd+Shift+P on Mac), type "rendering", select "Show Rendering", and scroll down to "Emulate vision deficiencies." You can simulate protanopia, deuteranopia, tritanopia, achromatopsia, and blurred vision.

This is my go-to tool because it requires no installation and works on any webpage.

Design Tools

Figma offers a CVD simulation plugin called "Color Blind" that lets you preview your designs through different CVD filters. Check your designs before they reach development.

Adobe Color (color.adobe.com) has an accessibility checker that evaluates your color palette for CVD conflicts and suggests fixes.

Standalone Tools

Coblis (Color Blindness Simulator) lets you upload an image and see how it appears under different types of CVD. Great for testing marketing materials and screenshots.

Sim Daltonism (macOS only) provides a floating window that simulates CVD in real-time on anything visible on your screen.

Automated Checks

For automated testing, tools like axe-core and Lighthouse check for color contrast violations but do not specifically check for color-only information conveyance. That requires manual review. Make CVD simulation part of your design review process.

Real-World Examples

Traffic Light Pattern

The physical traffic light works despite red-green color blindness because of position: red is always on top, green is always on the bottom. Apply the same principle in your UI. If you have a status indicator with colored dots, consider adding a fixed position or shape difference.

Maps and Data Visualizations

Google Maps uses both color and labels for traffic conditions. Streets are color-coded (green for clear, red for congested), but you can also see travel time estimates. This redundancy is great design.

Links in Body Text

WCAG recommends that links within text have a 3:1 contrast ratio against surrounding text OR be underlined. The safest approach is to use both color and underline:

a {
  color: #0072B2;
  text-decoration: underline;
  text-underline-offset: 2px;
}

Removing underlines from links for aesthetic reasons is a common accessibility problem. If you must remove the underline in the default state, add it back on hover and focus, and ensure the link color has at least 3:1 contrast against the surrounding text.

WCAG Requirements Summary

Here are the WCAG criteria most relevant to color and color blindness:

  • 1.4.1 Use of Color (Level A): Color is not the sole means of conveying information
  • 1.4.3 Contrast (Minimum) (Level AA): 4.5:1 for normal text, 3:1 for large text
  • 1.4.6 Contrast (Enhanced) (Level AAA): 7:1 for normal text, 4.5:1 for large text
  • 1.4.11 Non-text Contrast (Level AA): 3:1 for UI components and graphical objects

Meeting Level AA is the standard most organizations and legal requirements target. Level AAA is aspirational for most projects but worth pursuing where feasible.

Practical Checklist

Here is the checklist I use when reviewing designs for color accessibility:

  1. Can all information be understood without color? Test by converting the page to grayscale.
  2. Do all color-coded elements have a non-color alternative (icon, pattern, label, position)?
  3. Does all text meet minimum contrast ratios (4.5:1 normal, 3:1 large)?
  4. Do interactive elements (buttons, links, form controls) meet 3:1 contrast against their background?
  5. Are links distinguishable from surrounding text without relying on color alone?
  6. Do charts and graphs use patterns, labels, or shapes in addition to color?
  7. Have I tested with a CVD simulator for protanopia, deuteranopia, and tritanopia?

Designing for color blindness is not about removing color from your designs. Color is beautiful and useful, and you should absolutely use it. The key is ensuring that color always works alongside other visual cues — text, icons, patterns, position — so that everyone can access your content equally.

Start by internalizing the golden rule: never use color as the only way to convey information. Build that habit, and you are already most of the way there.

Designing for Color Blindness: A Web Developer's Guide