Interfaces and product states
Compare error, success, warning, disabled, selected, and focus states to see whether meaning survives when hues become less distinct.
PRIVATE, IN-BROWSER IMAGE TOOL
Color Blindness Simulator
Explore how colors in an image may appear under four color vision approximations. This is a design preview, not a diagnosis or an exact copy of any person’s vision.
Your image stays on this device
Decoding, simulation, comparison, and PNG export happen in your browser. The image is not uploaded, stored, or included in analytics.
Try the simulator
Choose one PNG, JPEG, or WebP image, paste an image, or start with our sample.
Your image stays on this device
PNG, JPEG, or WebP · up to 20 MiB · up to 16.8 MP · 8192 px per side
You can also paste one image from the clipboard.
What is a color blindness simulator?
A color blindness simulator transforms an image to approximate how some color relationships can change under common color vision difference models. It lets designers compare the same interface, chart, map, illustration, or photograph without changing the source file.
This page is an educational design aid. It previews image pixels; it does not test your eyesight, identify a color vision condition, or reproduce exactly what another person sees.
Want to check your own red-green color recognition instead? Use our short, non-diagnostic screening test.
Take the color blindness screening testWhen this simulator is useful
Use the preview early in design and again before release. It is especially useful when color carries status, category, direction, or emphasis.
Charts and data visualization
Inspect series, legends, heatmaps, and small marks for colors that merge or become hard to trace.
Maps, diagrams, and learning materials
Check routes, zones, labels, and annotations where a color-only distinction could hide important information.
Brand and campaign artwork
Preview logos, calls to action, social graphics, and promotional images while keeping contrast and non-color cues in view.
How to use the simulator
- 1Choose, drop, or paste one supported image, or load the bundled sample.
- 2Select Protan, Deutan, Tritan, or the fixed Achromatopsia approximation.
- 3For Protan, Deutan, or Tritan, adjust the illustrative strength from 0% to 100%.
- 4Compare the original and simulated views, then download a metadata-free PNG if useful.
Simulation types
Protan, Deutan, and Tritan are umbrella terms used here for model families, not a diagnosis of an individual. Select the mode that matches the color relationship you want to inspect.
Protan
An umbrella term for protanopia and protanomaly, involving the L-cone (long-wavelength) range. This mode applies a Machado red-cone difference approximation.
Deutan
An umbrella term for deuteranopia and deuteranomaly, involving the M-cone (medium-wavelength) range. This mode applies a Machado green-cone difference approximation.
Tritan
An umbrella term for tritanopia and tritanomaly, involving the S-cone (short-wavelength) range. This is a blue-cone difference approximation; evidence and individual experiences vary.
Achromatopsia
Uses a fixed luminance-preserving grayscale illustration. It does not simulate photophobia, visual acuity, nystagmus, or other real condition experiences.
Static comparison example
Original
Protan
Deutan
Tritan
The panels use a fixed setting to make comparison easier. They are not exact representations of any individual’s vision.
How to interpret the preview
Look for lost distinctions, not for a single pass-or-fail result. Compare each simulated view with the original at the size people will actually use.
Find colors that merge
Notice when adjacent controls, chart series, routes, or status colors become difficult to tell apart.
Inspect small and low-contrast details
Check thin lines, small text, icons, borders, and muted states. A distinction visible in a large preview may disappear at its real size.
Turn observations into design changes
Add labels, icons, patterns, shapes, or stronger contrast, then preview again and validate with broader accessibility checks and user research.
Method
Protan, Deutan, and Tritan use the precomputed matrices published by Machado, Oliveira, and Fernandes in 2009. Adjacent model samples are interpolated for the illustrative strength control, and colors are transformed in linear-light RGB while alpha is preserved. Achromatopsia uses a fixed relative-luminance grayscale illustration.
Important limitations
A simulation cannot reproduce exactly what a particular person sees. Individual vision, display calibration, color profiles, ambient light, image compression, and the model’s scope all affect the result. The Achromatopsia grayscale view also does not simulate photophobia, visual acuity, nystagmus, or other lived effects. This tool does not diagnose or classify a person, and it does not correct colors.
Color-accessible design checklist
Treat simulation as one observation step, then verify the design with these practical checks.
- Do not use color as the only way to communicate meaning or an action.
- Pair status and category colors with text, icons, shapes, patterns, or borders.
- Check text and non-text contrast separately at the intended size.
- Inspect thin lines, small labels, disabled states, focus states, and chart series.
- Test multiple simulator modes instead of assuming one preview covers every color vision difference.
- Combine automated and manual accessibility checks with research involving people with color vision differences.
Frequently asked questions
No. The simulator changes image pixels for a design preview. A screening test asks you to identify visual targets and still cannot provide a medical diagnosis.
It is a model-based approximation, not an exact copy of anyone’s sight. Vision, screens, lighting, color profiles, and the image itself can all change the result.
The page includes Protan, Deutan, and Tritan model families plus one fixed Achromatopsia grayscale illustration. These modes do not identify a person’s condition.
It interpolates between published Machado matrix samples for an illustrative preview. The percentage does not measure or correspond to a person’s clinical severity.
Try all relevant modes and look for different failures. Protan and Deutan often reveal red-green distinctions, while Tritan explores a separate blue-yellow-related model range.
No. The image and derived pixels stay in the current browser session and are released when you reset, replace it, leave, or close the page.
This page uses one fixed luminance-preserving grayscale illustration. It does not model degrees of monochromacy, photophobia, visual acuity, nystagmus, or other lived effects.
No. Also inspect contrast and non-color cues, use automated and manual checks, and test with people. This preview is only one input.
Method and accessibility sources
The simulation method follows Machado, Oliveira, and Fernandes (2009). Health sources explain color vision deficiency and Achromatopsia; WCAG sources support the design guidance. These organizations have not reviewed or endorsed this site.
- Machado, Oliveira & Fernandes color vision model (2009)
- National Eye Institute: Color Blindness
- MedlinePlus Genetics: Achromatopsia
- W3C WCAG: Understanding Use of Color
- W3C WCAG: Understanding Contrast (Minimum)
Educational design approximation only. Not a medical test, diagnosis, certification, or exact representation of an individual’s vision.