Color blindness simulator
Simulate any color and any image under all eight conditions — protanopia, deuteranopia, tritanopia, achromatopsia and the milder anomalous forms — and check whether a text/background pair stays distinguishable. Free, instant, browser-only, nothing uploaded.
See how any color — or a whole image — appears under all eight types of color vision deficiency: protanopia, deuteranopia, tritanopia, achromatopsia and the milder anomalous forms. Roughly 8% of men and 0.5% of women have some form of color blindness, so checking matters.
Simulations run on a local canvas with peer-reviewed Machado et al. (2009) matrices; nothing is uploaded. A pair checker also grades whether text on a background stays distinguishable for color-blind viewers.
- HEX
#47003a- RGB
- rgb(71, 0, 58)
- HSL
- hsl(311, 100%, 14%)
- OKLCH
- oklch(0.27 0.119 337.9)
Simulation results
Normal vision
#47003AFull trichromatic color vision
Protanopia
#000E3DNo red cones (~1.3% of males)
Deuteranopia
#0D1737No green cones (~1.2% of males)
Tritanopia
#4F0312No blue cones (~0.01% of population)
Achromatopsia
#131313Total color blindness (~0.003%)
Milder forms — anomalous trichromacy (far more common than the full forms)
Protanomaly
#150A3CReduced red sensitivity (~1% of males)
Deuteranomaly
#1E1038Reduced green sensitivity (~4.6% of males)
Tritanomaly
#4C021EReduced blue sensitivity (~0.01% of population)
Simulations use the Machado et al. (2009) matrices — the same transform used by major accessibility tools. Roughly 8% of men and 0.5% of women have some form of color vision deficiency, and the milder anomalous forms make up the vast majority of cases.
Preview a whole image
Sometimes a single swatch isn't enough — charts, UI screenshots and photos have color doing real work. Drop one in and it is processed locally on a canvas, nothing is uploaded. Files are capped at 768px for speed, so any size works.
Are two colors distinguishable?
Contrast ratio measures lightness, not hue. Two colors can pass WCAG contrast yet differ only in hue and collapse into the same tone for someone with a color vision deficiency. Check a text and background pair below to confirm they stay readable to everyone.
Baseline contrast (WCAG)
2.78:1Necessary, but not sufficient on its own — keep reading to see whether the pair stays distinguishable after each simulation.
Protanopia
No red cones (~1.3% of males)
Contrast 4.17:1 after simulation
Deuteranopia
No green cones (~1.2% of males)
Contrast 3.02:1 after simulation
Tritanopia
No blue cones (~0.01% of population)
Contrast 2.96:1 after simulation
Achromatopsia
Total color blindness (~0.003%)
Contrast 3.45:1 after simulation
Color difference is the perceptual distance between the simulated pair on a 0–100 scale. Below roughly 30, the two are hard to tell apart even when the contrast ratio looks fine. The pair checker grades the full (anopia) conditions — if a pair survives those worst cases, it will survive the milder anomalous forms too.
Want the full design system from a color? Open the color palette generator to create accessible palettes, semantic tokens, light and dark themes, and production-ready CSS — all from a single color.
How to use this tool
- Enter or pick a color in HEX, rgb() or hsl() format.
- The tool instantly shows how that color appears under each type of color blindness.
- Use the results to choose palettes that work for everyone — not just people with full color vision.
Frequently asked questions
- What types of color blindness does this simulate?
- Eight conditions: the full forms — protanopia (no red cones), deuteranopia (no green cones), tritanopia (no blue cones) and achromatopsia (total color blindness) — plus the milder, far more common anomalous forms protanomaly, deuteranomaly and tritanomaly. Each uses peer-reviewed Machado et al. (2009) matrices.
- Can I simulate a whole image, not just one color?
- Yes — drop in a photo, chart or UI screenshot and it is simulated under all eight conditions on a local canvas. Your image never leaves your browser, and every preview can be downloaded as a PNG.
- Can I check if two colors are distinguishable?
- Yes — alongside simulating single colors and images, you can check a foreground/background pair under every full condition. The color difference score shows whether they stay distinguishable, which contrast ratio alone can't guarantee.
- Why does color accessibility matter?
- Roughly 8% of men and 0.5% of women have some form of color vision deficiency. If your interface relies on color alone to convey meaning, those users may be excluded. This tool helps you catch those issues early.
Related tools
Related guides
Design styles · 1 Sept 2026
Bauhaus: primary geometry, bold type, hard edges
Red, blue, yellow, geometry. The Bauhaus approach to interface design is discipline disguised as play — here's the preset.
Design styles · 1 Sept 2026
Memphis: postmodern geometry and deliberate imbalance
Dots, squiggles, loud triads. The Memphis style is play with a point — here's the design system preset with its restraint built in.
Accessibility · 11 Sept 2026
Types of color blindness: a practical guide for designers
Protans, deutans, tritans and monochromacy — the full cast of color vision deficiency, with honest prevalence numbers and what each means for your palette.
Color blindness simulator runs entirely in your browser — nothing you enter is sent to a server.