Dev Tools
Client-sidefiles never upload

Colour-blindness Simulator (8 + normal)

Brettel & Machado matrices simulate **8 deficiencies** (red-blind / green-blind / blue-yellow, each in full + anomalous, plus achromatopsia) alongside normal vision. **Compare palettes or your own image side-by-side.** Essential for designers checking dashboards, charts, alert systems.

Normal vision~92% of population
Protanopia (red-blind)~1% males
Protanomaly (red-weak)~1% males
Deuteranopia (green-blind)~1% males
Deuteranomaly (green-weak)~5% males (most common)
Tritanopia (blue-blind)<0.01% (very rare)
Tritanomaly (blue-weak)~0.01%
Achromatopsia (total)1 in 30,000 (full)
Achromatomaly (partial)Rare
›How to use
  1. Pick Palette mode (12 swatches) or Image mode (upload your dashboard / mock / chart).
  2. Nine panels show simultaneously: Normal vision + 8 deficiencies, each labelled with population prevalence.
  3. Palette mode is great for sanity-checking brand colours; image mode is best for full screens (charts, gradients, icons, alert states).
  4. If two distinct colours in normal vision collapse to similar shades for one of the simulations, add shape / icon / label redundancy — never rely on colour alone.
Tips
  • Red-green deficiencies (Protan + Deutan) affect ~8% of males — your top accessibility audit target.
  • Blue-yellow (Tritan) is very rare (<0.01%) but still real — avoid making blue-vs-yellow the only signal.
  • Colour + shape / text is the golden rule (WCAG 1.4.1). Add ⚠ to error messages, not just red text.
  • Use ColorBrewer / Viridis for chart palettes — they're colour-blind friendly out of the box, avoiding red-green pairs.
  • Matrices come from Brettel & Viénot & Mollon (1997) and Machado et al. (2009) — the industry references.

💡 Runs in your browser via canvas pixel ops — images never upload. Anything above 400px on the longest edge is downscaled to keep the simultaneous 9-panel render smooth.

Related tools