Colour blindness simulator

Learn colour blindness simulator with practical examples, diagrams, and best practices. Covers colors, accessibility, color-blindness development techniques with visual explanations.
Tags:
Categories:

Building a Colour Blindness Simulator for Web Accessibility

Hero image for Colour blindness simulator

Learn how to create a colour blindness simulator using client-side technologies to enhance web accessibility for users with various forms of colour vision deficiency.

Colour blindness, or colour vision deficiency (CVD), affects a significant portion of the population. Designing accessible web content means ensuring that your visual elements are perceivable and understandable by everyone, including those with CVD. A colour blindness simulator is a powerful tool for developers and designers to experience their websites through the eyes of users with different types of CVD, such as protanopia, deuteranopia, and tritanopia.

Understanding Colour Vision Deficiencies

Before diving into simulation, it's crucial to understand the common types of colour blindness. Each type affects how individuals perceive certain colours, primarily due to issues with the cone cells in the retina. The most common forms are red-green colour blindness (protanopia and deuteranopia), followed by blue-yellow colour blindness (tritanopia). Achromatopsia, or complete colour blindness, is rare but also important to consider.

flowchart TD
    A[Normal Vision] --> B{Colour Perception}
    B --> C[Protanopia (Red-Weak/Absent)]
    B --> D[Deuteranopia (Green-Weak/Absent)]
    B --> E[Tritanopia (Blue-Weak/Absent)]
    B --> F[Achromatopsia (No Colour Perception)]
    C --> G[Impact on Red/Green Hues]
    D --> G
    E --> H[Impact on Blue/Yellow Hues]
    F --> I[Grayscale Perception]

Overview of different colour vision deficiencies and their impact.

Simulation Techniques: CSS Filters and JavaScript

The most effective way to simulate colour blindness on a webpage is by manipulating the colours rendered by the browser. This can be achieved primarily through CSS filters or more complex JavaScript-based image processing. CSS filters offer a straightforward and performant method for applying colour transformations to the entire page or specific elements.

/* Protanopia Simulation */
.simulate-protanopia {
  filter: url(#protanopia);
}

/* Deuteranopia Simulation */
.simulate-deuteranopia {
  filter: url(#deuteranopia);
}

/* Tritanopia Simulation */
.simulate-tritanopia {
  filter: url(#tritanopia);
}

/* Achromatopsia (Grayscale) Simulation */
.simulate-achromatopsia {
  filter: grayscale(100%);
}

Basic CSS filter classes for colour blindness simulation.

While CSS filters like grayscale() are built-in, simulating specific colour blindness types like protanopia or deuteranopia often requires SVG filters. These filters allow for more precise matrix transformations of colour channels. You embed an SVG element with filter definitions directly into your HTML, and then reference these filters in your CSS.

<svg style="display: none;">
  <filter id="protanopia">
    <feColorMatrix type="matrix"
      values="0.567, 0.433, 0,     0, 0
              0.558, 0.442, 0,     0, 0
              0,     0.242, 0.758, 0, 0
              0,     0,     0,     1, 0"/>
  </filter>
  <filter id="deuteranopia">
    <feColorMatrix type="matrix"
      values="0.625, 0.375, 0,     0, 0
              0.7,   0.3,   0,     0, 0
              0,     0.3,   0.7,   0, 0
              0,     0,     0,     1, 0"/>
  </filter>
  <filter id="tritanopia">
    <feColorMatrix type="matrix"
      values="0.95,  0.05,  0,     0, 0
              0,     0.433, 0.567, 0, 0
              0,     0.475, 0.525, 0, 0
              0,     0,     0,     1, 0"/>
  </filter>
</svg>

SVG filter definitions for various colour blindness types.

Implementing a User Interface for the Simulator

To make the simulator usable, you'll need a simple user interface, typically a set of radio buttons or a dropdown menu, that allows users to select the desired colour blindness type. When a selection is made, JavaScript can apply the corresponding CSS class to the <body> element, effectively transforming the entire page's colours.

document.addEventListener('DOMContentLoaded', () => {
  const simulatorControls = document.getElementById('simulator-controls');
  if (simulatorControls) {
    simulatorControls.addEventListener('change', (event) => {
      const selectedType = event.target.value;
      document.body.className = ''; // Clear existing classes
      if (selectedType !== 'normal') {
        document.body.classList.add(`simulate-${selectedType}`);
      }
    });
  }
});

JavaScript to handle user selection and apply simulation classes.

1. Define SVG Filters

Embed the SVG <filter> definitions for protanopia, deuteranopia, and tritanopia within your HTML, typically at the beginning of the <body> or in a hidden SVG element.

2. Create CSS Classes

Define CSS classes (e.g., .simulate-protanopia) that apply the filter: url(#filterId); property to the element you wish to simulate (e.g., body).

3. Build User Controls

Add HTML elements like radio buttons or a dropdown menu that represent each colour blindness type and a 'Normal Vision' option.

4. Implement JavaScript Logic

Write JavaScript to listen for changes in your user controls. When a selection is made, remove any existing simulation classes from the <body> and apply the new one corresponding to the selected type.