Color Blindness Simulator — Protanopia, Deuteranopia, Tritanopia, Monochromacy

Real-world use cases

• Verifying a 6-color dashboard palette before a product launch

  Your analytics dashboard ships next week with 6 line-chart series colored red, orange, green, teal, blue, purple. Paste all six hex codes into multi-hex mode. In the deuteranopia panel the red and green lines collapse to the same muddy ochre, so a deutan PM cannot tell revenue from churn. You swap green for a darker teal that keeps a clear luminance gap, re-check all eight panels, and ship a palette that survives every deficiency instead of guessing.

• Producing before/after evidence for an accessibility audit report

  A WCAG 1.4.1 audit needs documented proof, not a checkbox. Drop the client's pricing page screenshot into the image mode, screenshot the protanopia and achromatopsia panels, and paste them side by side in your report. The "Recommended" badge that relied on a green outline vanishes into the background for 1 in 12 men, which is a concrete finding with a visual the client cannot argue with.

• Checking a single brand color against red-green deficiency

  Marketing picked #E63946 as the new error-state red and wants sign-off. Paste that one hex code, read across the protanomaly and deuteranomaly panels, and you see it drift toward brown but stay distinct from your #2A9D8F success green. That confirms the pairing works for the ~6% of men with red-green deficiency, so you approve it with the simulation screenshots attached rather than relying on a gut call.

• Teaching a design team why hue alone fails

  New hires keep encoding status with red-vs-green chips. In a 10-minute workshop you paste those two chip colors, switch to the deuteranopia panel, and both turn near-identical tan in front of the whole team. The point lands faster than any slide: you add a check and a cross icon on the spot, re-run the panels, and the two states stay readable for every viewer regardless of color vision.

Common pitfalls

• Trusting only the protanopia/deuteranopia panels and skipping tritanopia and achromatopsia. A blue↔yellow chart can pass red-green checks yet fail tritans, and a purely hue-based legend dies under full achromatopsia. Always scan all eight.

• Testing one big 200px swatch and calling it safe. Colors that look distinct in a large swatch can still collapse in a 12px chart legend or thin 1px border. Re-check the colors at the real size they appear in your UI.

• Assuming the dichromat panel is "what they literally see." It shows color appearance, not confusion lines, so two colors can look different here yet still be hard to discriminate. Pair every color with an icon, label, or luminance gap rather than trusting the panel alone.

Privacy