Color Blindness Simulator
See your palette the way color-blind users do — eight vision modes for colors and whole images, with a side-by-side board that exposes confusing pairs.
Three-step start
- 1Provide a color: pick or paste the color to check — or drop a whole image below.
- 2Switch vision: cycle the eight modes; the board and the image re-project together.
- 3Find collisions: if neighboring swatches look nearly identical, that pair collides — widen the lightness gap and re-check.
Color simulation
Choose a vision mode to see your color as that audience does (based on LMS-space transform matrices).
Top row: original colors. Bottom row: the current vision mode. Your color sits beside eight common reference colors — click any simulated swatch to copy its HEX.
#E23B2EImage simulation
Drop or upload a whole image to re-project it pixel by pixel under the current mode; processing happens in a local canvas and the image is never uploaded.
Are the simulated colors medically exact?
They are the standard engineering approximation: Brettel/Viénot-style matrices that re-map colors through the LMS cone-response space for each dichromacy. Individual variation is real, so treat the board as a screening tool, not a diagnosis. The -anomaly modes approximate the intermediate state by blending the normal and dichromatic matrices at about 50%.
What should I check on my own UI?
Run your state colors — success green against error red, chart series against each other, link blue against body text — through protanopia and deuteranopia first: red-green deficiencies cover the vast majority of color-vision impairment. If two states merge on the board, separate them by lightness or add an icon.
Does light-mode vs dark-mode matter here?
The transform is applied to raw sRGB values, so it is theme-independent. Still, run both themes: a pair that survives on a white surface can collide on a dark one because perceived separation also depends on the surround.
Frequently asked questions
What do protanopia, deuteranopia and tritanopia actually confuse?
Protanopia and deuteranopia both live on the red-green axis: dark red against forest green, orange against yellow-green, pink against gray are the classic collisions — deuteranopia is the more common of the two (roughly 5% of men). Tritanopia is rare and collapses the blue-green axis: blue against cyan, purple against red. Achromatopsia keeps only lightness: the world reduces to gray.
How is a color-blind (anomaly) simulation different from a -opia simulation?
The -opia forms mean one cone type is entirely missing, and the matrix is computed for that full loss. The -omaly forms keep the cone but shift its spectral peak, so this tool blends the normal matrix with the -opia matrix at roughly 50% strength — a 'can tell them apart but has to think' middle state.
Two of my colors collapse in the simulation. What now?
First increase the lightness gap — contrast in luminance survives every color vision deficiency. Then add redundant encoding: patterns, icons or text labels, never color alone. Only then consider changing hues; a blue-plus-orange pair stays separable under all three simulations.