色覚異常シミュレーター
さまざまな種類の色覚異常を持つ人々に画像がどのように見えるかをプレビューします。
このツールについて
任意の画像をアップロードすると、通常の視覚、第一色覚異常（赤緑色覚）、第二色覚異常（緑赤色覚）、第三色覚異常（青黄色覚）、全色盲のシミュレーションを示す2×3グリッドが即座に表示されます。変換はキャンバスのピクセル操作を使用してすべてブラウザ内で実行されます。
使い方
- 1 ステップ1：アップロードエリアをクリックするか、画像をドラッグしてください。
- 2 ステップ2：元の画像と5つの色覚異常シミュレーションがグリッドに表示されます。
- 3 ステップ3：任意のタイルにホバーして全サイズのシミュレーションラベルを表示してください。
- 4 ステップ4：いつでも別の画像をアップロードしてデザインを比較してください。
Why color blindness simulation matters for design
Roughly 1 in 12 men and about 1 in 200 women have some form of color vision deficiency. That means in any audience of a few hundred people, dozens are seeing your charts, status indicators, maps, and buttons differently from how you designed them. A red "error" and a green "success" badge can look identical to a person with red-green color blindness. This tool lets you upload an image and instantly see it reprocessed through four common types of color vision deficiency, side by side with the normal version, so you can catch accessibility problems before they ship.
How the simulation works under the hood
Color vision starts with three types of cone cells in the retina, each tuned to long (red), medium (green), or short (blue) wavelengths. The major forms of color blindness happen when one cone type is missing or shifted. To simulate this, the tool reads every pixel of your image with the HTML5 Canvas API and multiplies its red, green, and blue values by a fixed 3×3 transformation matrix that approximates how a missing cone redistributes color information. For each pixel, the new red channel is a weighted blend of the original R, G, and B, and the same for green and blue. The reprocessed pixels are written back to a canvas and shown as a new image.
| Simulation | Missing/affected cone | Everyday name |
|---|---|---|
| Protanopia | Long-wavelength (red) | Red-blind |
| Deuteranopia | Medium-wavelength (green) | Green-blind |
| Tritanopia | Short-wavelength (blue) | Blue-yellow blind |
| Achromatopsia | All color, only brightness | Total color blindness |
The grayscale case is different
The achromatopsia tile does not use a color-shift matrix. Instead it computes the luminance of each pixel using the standard Rec. 709 weights: 0.2126 × R + 0.7152 × G + 0.0722 × B. Those coefficients are not arbitrary — the human eye is far more sensitive to green than to red, and least sensitive to blue, so green contributes the most to perceived brightness. Setting all three channels of each pixel to this single luminance value produces a perceptually correct grayscale, not the muddy result you get from naively averaging the three channels equally. This is also why the grayscale view is the single most useful test: if two colors collapse to the same shade of gray, they will be hard to tell apart for anyone with reduced color perception, and impossible for someone with total color blindness.
A worked example
Imagine a dashboard where "passing" cells are green (#22c55e) and "failing" cells are red (#ef4444). To normal vision these are obviously different. Run the image through the Deuteranopia tile and both colors shift toward a similar muddy yellow-brown — the green-red distinction nearly vanishes. Now look at the Achromatopsia tile: the red maps to a medium-dark gray and the green to a slightly lighter gray, but they are close enough that a viewer would struggle to sort the table by status. That single comparison tells you the design relies on color alone and needs a second cue.
What to do with what you see
- Never rely on color alone. Pair every color-coded signal with a shape, icon, label, or pattern — a checkmark and an X, "Pass"/"Fail" text, solid versus dashed lines.
- Prefer blue-orange to red-green. The most common deficiencies are red-green; blue and orange stay distinguishable across nearly all types.
- Check charts and maps especially. Heatmaps, line charts, and choropleth maps are the worst offenders because they encode meaning purely in hue.
- Test brightness contrast, not just hue. If the grayscale tile shows two elements at the same lightness, increase their luminance difference even if the hues differ.
Limitations to keep in mind
- These are approximations. The matrices are widely-cited linear-RGB transforms, but real color perception varies between individuals and is not perfectly linear. Treat the output as a strong warning system, not a clinical diagnosis.
- Anomalous trichromacy is not shown. Milder forms (protanomaly, deuteranomaly) where a cone is shifted rather than absent are not separately simulated; the dichromat versions here represent the stronger, worst-case end.
- Your own monitor matters. Display calibration and ambient light affect what you and your users actually see.
Every transformation runs locally in your browser using canvas pixel manipulation. The image you upload is never sent to a server, so you can safely test private screenshots and unreleased designs.