Color Blindness Simulator

Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency, yet most charts, UI mockups and photos are designed and checked only by people with typical color vision. This tool lets you upload any image and see it the way someone with protanopia, deuteranopia, tritanopia or achromatopsia actually would, so you can catch a confusing red/green legend or an unreadable status color before it ships.

The simulation is not a naive desaturate or hue-rotate filter. Protanopia, deuteranopia and tritanopia are simulated with the published Machado, Oliveira & Fair (2009) dichromacy transform matrices — real 3x3 coefficients derived from physiological cone-response models, the same family of matrices used by professional accessibility tools. Because these matrices are only valid in a linear light space, each pixel is first converted from sRGB to linear RGB using the precise piecewise sRGB transfer function (not a flat gamma-2.2 shortcut), the matrix is applied there, and the result is converted back to sRGB for display and export. Achromatopsia (total color blindness) uses the standard ITU-R BT.709 luminance weights (0.2126 red, 0.7152 green, 0.0722 blue) applied in that same linear space, which is the conventional definition of perceived brightness used across broadcast and display standards.

Real color vision deficiency is not all-or-nothing — most people with a CVD retain some function in the affected cone type. The severity slider reflects that: at 0% you see the untouched original, at 100% you see the fully simulated dichromatic or achromatopic color, and every value in between linearly blends the two per pixel. That makes it possible to preview mild, moderate and severe cases of the same deficiency type on the same image.

Drop in a photo, chart or UI screenshot, pick a CVD type and severity, and press Execute to see an original-versus-simulated comparison rendered on canvas. Download the simulated version as a PNG at the image's original resolution. Nothing is uploaded to a server — the file never leaves your device, and the whole pipeline runs with the browser's own Canvas 2D and ImageData APIs.