Color Blindness Simulator

色覚シミュレーター

検証済TESTED

YOUR COLORS

OR AN IMAGE

Stays on your device; nothing uploads.

Typical vision一般色覚Reference

Protanopia1型2色覚No red cones · ~1% of men

Deuteranopia2型2色覚No green cones · most common

Tritanopia3型2色覚No blue cones · rare

Simulations use the standard Machado et al. dichromacy matrices, applied by your own GPU via SVG color-matrix filters. If two swatches merge in any panel, that pair needs a second cue: a label, pattern, or contrast shift.

How it works

仕組み

Roughly 1 in 12 men and 1 in 200 women see color differently, most commonly along the red-green axis. This simulator shows your palette or image under the three dichromatic types (protanopia, deuteranopia, and tritanopia) side by side with typical vision, using the standard Machado color matrices applied right in your browser. If two states in your UI are told apart only by a red/green swap, you'll see them collapse into the same color here.

Which type should I design for first?

Deuteranomaly and deuteranopia (green-weak/absent) are by far the most common, followed by the protan types. If your reds and greens survive the deutan and protan panels, you've covered most affected users.

Is my image uploaded anywhere?

No. The picture never leaves your device. It's rendered locally, and the filters run on your own GPU. Reloading the page clears it.

The simulation can't be perfect, right?

Right. Color perception varies between individuals, and monitors add their own bias. Treat the panels as a strong directional check, and back critical distinctions with labels, icons, or patterns rather than hue alone.