Aller au contenu
CB

Color Blindness Simulator

Simulate how colors look under CVD types, and see which pairs become indistinguishable.

InputNormalProtanopiaDeuteranopiaTritanopiaAchromatopsia
#ef4444
#ef4444
#6b6b46
#939338
#b4b400
#848484
#22c55e
#22c55e
#bbbb5d
#aaaa63
#9393ff
#acacac
#3b82f6
#3b82f6
#7c7cf6
#7373f6
#6767ff
#858585
#f59e0b
#f59e0b
#abab11
#bdbd00
#cfcf00
#b1b1b1

Confusion risk

  • #ef4444 and #22c55e become hard to tell apart under Deuteranopia.
  • #22c55e and #3b82f6 become hard to tell apart under Tritanopia.
  • #ef4444 and #22c55e become hard to tell apart under Achromatopsia.
  • #ef4444 and #3b82f6 become hard to tell apart under Achromatopsia.
  • #22c55e and #3b82f6 become hard to tell apart under Achromatopsia.
  • #3b82f6 and #f59e0b become hard to tell apart under Achromatopsia.

Fix: increase the lightness contrast between colors, or don't rely on color alone — add shape, pattern, icons, or labels as a non-color cue.

The simulation approximates Viénot/Brettel's cone-space model and doesn't capture individual variation. Everything runs locally in your browser — nothing is uploaded.

À propos de Color Blindness Simulator

A color blindness simulator approximates how people with color vision deficiency (CVD) perceive colors, letting you check whether your UI or chart color-coding still communicates correctly. This tool covers protanopia, deuteranopia, tritanopia (each caused by one non-functioning cone type), and achromatopsia (no functioning cones, perceiving only brightness). Red-green CVD (protanopia/deuteranopia) affects roughly 1 in 12 men and 1 in 200 women worldwide, making it one of the most common visual differences your users will have. toco.tools's simulator converts your colors or images to each CVD type locally in the browser and lays the results out in a grid next to the normal-vision version. What makes this tool useful isn't just the recoloring — it's the automatic warning that compares OKLab (perceptually uniform) distance before and after simulation, flagging color pairs that were clearly distinct but become hard to tell apart under a given CVD type. A chart that relies only on red vs. green, or a UI that shows status by color alone, can silently fail for these users. When a warning appears, the usual fix is to increase the lightness contrast between colors, or add a non-color cue such as shape, pattern, icon, or label.

Comment l'utiliser

  1. Choose to check by color or by image
  2. Edit colors, or upload an image
  3. Review the simulated grid and confusion warnings

FAQ

What is a color blindness simulator?

A tool that approximates CVD perception and warns you when specific color pairs become hard to distinguish, not just a recoloring filter.

What are protanopia, deuteranopia, and tritanopia?

Protanopia (missing L/red cones), deuteranopia (missing M/green cones), and tritanopia (missing S/blue cones). Achromatopsia is the absence of functioning cones altogether, leaving only brightness perception.

How common is color vision deficiency?

Red-green CVD affects roughly 1 in 12 men and 1 in 200 women globally — common enough that most sizable audiences include someone affected.

Why shouldn't UI or charts rely on color alone?

For people with CVD, certain color pairs (like red and green) can appear identical or nearly so. Relying on color alone can make information disappear — pair it with lightness contrast, shape, pattern, or labels.

Is uploaded data sent externally?

No. All processing runs in your browser; nothing is sent to toco.tools servers.