Color Blindness

title: "Color Blindness and Accessibility" weight: 18 description: "Learn about the three main types of color blindness (protanopia, deuteranopia, tritanopia), how they affect web perception, and how to design content that is accessible to color blind users." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, color-contrast]

Color blindness affects approximately 300 million people worldwide, with protanopia (red-blind), deuteranopia (green-blind), and tritanopia (blue-blind) being the three main types -- requiring designs that do not rely on color alone to convey information.

## What You'll Learn

You will understand the types of color blindness, how they affect web perception, use simulation tools, and design patterns that work for color blind users.

## Why It Matters

If your design uses color alone to convey meaning -- red for errors, green for success, colored chart lines -- a significant portion of your audience may miss the information entirely.

## Real-World Use

A dashboard uses green and red indicators for stock levels. A user with deuteranopia (green-blind) cannot distinguish between the two colors. The fix is adding icons and text labels alongside the colors, making the information accessible to everyone.

## Color Blindness Types

```mermaid
flowchart TD
  A[Color Blindness] --> B[Protanopia]
  A --> C[Deuteranopia]
  A --> D[Tritanopia]
  B --> E[Red-blind: 1% of males]
  C --> F[Green-blind: 6% of males]
  D --> G[Blue-blind: rare]
  E --> H[Cannot distinguish red/green]
  F --> H
  G --> I[Cannot distinguish blue/yellow]

Designing for Color Blindness

Use multiple visual cues beyond color: patterns, icons, text labels, and position.

<!-- Bad: color only -->
<span class="status" style="color: green;">Active</span>
<span class="status" style="color: red;">Inactive</span>

<!-- Good: color + icon + text -->
<span class="status status-active">
  <span class="icon-check"></span> Active
</span>
<span class="status status-inactive">
  <span class="icon-x"></span> Inactive
</span>

/* Accessible for color blindness */
.status-active {
  color: #2e7d32;
  background: #e8f5e9;
  padding: 4px 8px;
  border-left: 4px solid #2e7d32;
}

.status-inactive {
  color: #c62828;
  background: #ffebee;
  padding: 4px 8px;
  border-left: 4px solid #c62828;
}

/* Patterns instead of color alone on charts */
.chart-bar-revenue {
  background: repeating-linear-gradient(
    45deg,
    #0056b3,
    #0056b3 4px,
    #003d80 4px,
    #003d80 8px
  );
}

// Color blindness simulation filter
function simulateProtanopia(hex) {
  const [r, g, b] = hexToRgb(hex);
  // Simplified protanopia simulation
  const sr = r * 0.567 + g * 0.433;
  const sg = r * 0.558 + g * 0.442;
  const sb = b;
  return rgbToHex(Math.round(sr), Math.round(sg), Math.round(sb));
}

// Check if two colors are distinguishable for color blind users
function areDistinguishable(hex1, hex2, condition) {
  const sim1 = simulateColorBlindness(hex1, condition);
  const sim2 = simulateColorBlindness(hex2, condition);
  return getContrastRatio(sim1, sim2) >= 3;
}

Common Mistakes

• Using red and green as the only differentiator
• Assuming color blind users see in grayscale
• Forgetting about blue-blindness (tritanopia)
• Not testing designs with color blindness simulators
• Using color alone in charts and data visualizations
• Relying on colored instruction text (click the green button)
• Not providing text alternatives for color-coded information

Practice and Challenge

Practice 1: Simulate protanopia on a page using browser DevTools. Practice 2: Identify three places on your site that use color alone. Practice 3: Add text labels to color-coded status indicators. Practice 4: Test a chart with color blindness simulation. Practice 5: Create a form that does not rely on color for error states.

Challenge: Redesign a color-coded dashboard for color blind accessibility. The dashboard has: red/green status indicators, a pie chart with 4 colored segments, and a line chart with 3 colored lines. Replace color-only indicators with color + pattern + label combinations. Test each change with protanopia and deuteranopia simulations.

FAQ

Mini Project

Create a color blindness simulation testing suite. Include: a page with common design patterns (status indicators, links, charts, forms, navigation), a browser extension for simulation, and a checklist of things to verify in each simulation mode. Test your own site and document at least 3 issues found.

What's Next

Color Not Only - SC 1.4.1 covers the WCAG requirement that color is not the sole means of conveying information.