Skip to content
ZeroServer.tools

Color Blindness Simulator

Simulate how your image appears to people with various types of color blindness.

Red-blind (no red cone function)

Drop an image or click to browse

PNG, JPG, WebP — processed in your browser

Simulate color blindness for accessibility testing

About 8% of men and 0.5% of women have some form of color vision deficiency. Use this tool to check how your designs look to people with deuteranopia (most common), protanopia, tritanopia, or achromatopsia. All processing uses a color matrix algorithm applied directly in your browser — no image is uploaded. For checking color contrast ratios, try Color Contrast Checker. To generate an accessible color palette, use Color Palette Generator.

Built and maintained by Meet Shah · Last updated

What this tool is used for

  • Checking whether a chart's series remain distinguishable without colour vision.
  • Testing a UI's status colours for red-green confusion.
  • Reviewing a design before it ships rather than after a complaint.
  • Checking a map or a heatmap whose whole meaning is carried by colour.
  • Demonstrating to a stakeholder why colour alone is not enough.

Frequently Asked Questions

How common is colour vision deficiency?
Around 8% of men and 0.5% of women of Northern European descent, which is roughly one in twelve male visitors. Deuteranomaly — green-weak rather than green-blind — is by far the most common form at about 6% of men, so the anomalous simulations matter more in practice than the full dichromacies.
How accurate is the simulation?
It is a well-known approximation, not a clinical model. Each mode applies a fixed 4×5 colour matrix to the gamma-encoded sRGB values; a physically faithful simulation converts to LMS cone space and works in linear light, as the Brettel and Machado models do. Use this to catch problems, not to certify a design.
Why does the monochrome mode look like a normal greyscale?
Because it is one — achromatopsia is simulated with the Rec.601 luma weights, 29.9% red, 58.7% green and 11.4% blue. Those are the analogue-television coefficients, which is why the result differs slightly from a modern Rec.709 desaturation and quite a lot from a naive average of the three channels.
What should I actually look for in the result?
Anything that was distinguishable only by hue. Red-on-green status indicators, a chart whose series differ only in colour, error text tinted red with no icon or label. WCAG 1.4.1 requires that colour is never the sole carrier of information, and this is the fastest way to see where it is.
Does passing contrast mean it is colour-blind safe?
No — they are separate tests. Contrast ratio compares luminance, which most colour deficiencies leave broadly intact, so a red and a green of identical luminance can pass contrast checks and still be indistinguishable. Check both, and add shape, position or text wherever hue is doing real work.

Common errors and gotchas

  • Treating a simulation as a substitute for testing with real users.
  • Checking only one type, when protanopia, deuteranopia and tritanopia differ substantially.
  • Fixing the palette but leaving colour as the only carrier of meaning.
  • Assuming a passing simulation means accessible, when contrast and labelling are separate requirements.
  • Simulating a compressed screenshot rather than the real rendering.

Related Design & CSS tools

Private & free — this tool runs entirely in your browser.

KinstaFast managed hosting — up to $500 + 10% recurring.affiliate