색맹 시뮬레이터
다양한 유형의 색맹을 가진 사람들에게 이미지가 어떻게 보이는지 미리 보세요.
이 도구에 대해
이미지를 업로드하면 정상 시각과 함께 원색맹(Protanopia), 녹색맹(Deuteranopia), 청색맹(Tritanopia), 완전색맹(Achromatopsia) 시뮬레이션을 보여주는 2×3 그리드가 즉시 표시됩니다. 변환은 캔버스 픽셀 조작을 사용하여 완전히 브라우저에서 실행됩니다.
사용 방법
- 1 1단계: 업로드 영역을 클릭하거나 이미지를 드래그 앤 드롭하세요.
- 2 2단계: 원본 이미지와 다섯 가지 색맹 시뮬레이션이 그리드에 표시됩니다.
- 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.