Skip to content

Color-Blind Simulator

Simulate how your designs appear to users with deuteranopia, protanopia, and tritanopia.

Part of A11y Suite · Built by Sandeep Upadhyay

  • Deuteranopia simulation
  • Protanopia simulation
  • Tritanopia simulation

When to use Color-Blind Simulator

  • Checking data visualisations and charts: Chart colours are a primary failure point for colour-blind users. Simulate deuteranopia to confirm your chart series are distinguishable without relying on colour alone.
  • Validating form validation states: Error states that use only red text or a red border are invisible to protanopes and deuteranopes. Verify that error states include a text label, icon, or pattern in addition to colour.
  • Reviewing maps and geospatial data: Choropleth maps and heatmaps are high-risk for colour accessibility. Simulate all three major deficiency types (protanopia, deuteranopia, tritanopia) before publishing.
  • Auditing brand colour usage: Check whether your brand primary and secondary colours remain distinguishable from each other under colour vision deficiency simulations - a common oversight in brand colour system design.

How colour vision deficiency simulation works

The Color-Blind Simulator applies colour vision deficiency (CVD) simulation matrices to transform the colours in your image to approximate how they appear to users with various forms of colour blindness. The simulation covers all eight clinically recognised types: protanopia (absent L-cones, red-blind), deuteranopia (absent M-cones, green-blind), tritanopia (absent S-cones, blue-blind), protanomaly (reduced L-cone sensitivity), deuteranomaly (reduced M-cone sensitivity, the most common form, affecting approximately 8 percent of males), tritanomaly (reduced S-cone sensitivity), achromatopsia (complete colour blindness, approximately 1 in 30,000), and blue-cone monochromacy (very rare).

Each simulation applies a 3x3 colour transformation matrix to the linear RGB values of each pixel. The matrices used are derived from the Machado, Oliveira, and Velho (2009) algorithm, published in IEEE Transactions on Visualization and Computer Graphics, which produces physiologically accurate simulations based on measured cone spectral sensitivity data. The image is decoded from sRGB, linearised by removing gamma correction, the simulation matrix is applied, and the result is re-encoded to sRGB for display. This two-step gamma-correct transformation is important - applying the matrix in non-linear sRGB space produces inaccurate results.

Deuteranomaly and protanomaly are the most common forms and together affect approximately 6 percent of males and 0.4 percent of females worldwide. Any UI that uses colour as the sole differentiator - red for error, green for success - fails this population segment and violates WCAG 2.2 Success Criterion 1.4.1 (Use of Colour).

Try Color-Blind Simulator

Interactive Color-Blind Simulator - coming soon