Why use this tool?
- Compare a palette across several simulated color vision conditions.
- Review an image or screenshot without sending the image to the application server.
- Find candidate color collisions to investigate in a real interface.
Color Blindness Simulator
Preview palettes and images with eight color vision simulations. Compare color pairs, inspect potential confusion, and improve labels and charts.
Runs locally in your browser
Palette
Click a swatch to edit it.
Edit color
Saturation 77 percent, brightness 90 percent, hue 1 degrees.
Test an image
Screenshots, charts, and maps. Nothing leaves this device.
Confusion warnings
#E53935and#43A047
Become hard to tell apart with Deuteranopia, Protanopia, Achromatopsia. Separate them by lightness, or add a label or shape.
#E53935and#1E88E5
Become hard to tell apart with Achromatopsia. Separate them by lightness, or add a label or shape.
#E53935and#8E24AA
Become hard to tell apart with Achromatopsia. Separate them by lightness, or add a label or shape.
#E53935and#546E7A
Become hard to tell apart with Achromatopsia. Separate them by lightness, or add a label or shape.
#43A047and#1E88E5
Become hard to tell apart with Tritanopia, Achromatopsia. Separate them by lightness, or add a label or shape.
#43A047and#8E24AA
Become hard to tell apart with Achromatopsia. Separate them by lightness, or add a label or shape.
#43A047and#546E7A
Become hard to tell apart with Tritanopia, Achromatopsia. Separate them by lightness, or add a label or shape.
#1E88E5and#8E24AA
Become hard to tell apart with Deuteranopia, Protanopia, Achromatopsia. Separate them by lightness, or add a label or shape.
#1E88E5and#546E7A
Become hard to tell apart with Tritanopia, Achromatopsia. Separate them by lightness, or add a label or shape.
#8E24AAand#546E7A
Become hard to tell apart with Achromatopsia. Separate them by lightness, or add a label or shape.
Simulations
The palette and a sample interface, as each type of color vision renders them.
- Build passedDeploy failedApproveReject
Typical vision
Unmodified reference
The unmodified colors, shown for direct comparison.
- Build passedDeploy failedApproveReject
Deuteranomaly
Fixed 0.6-severity simulation
Simulates altered green-cone response; some reds and greens become harder to distinguish.
- Build passedDeploy failedApproveReject
Deuteranopia
Red-green simulation
Simulates loss of green-cone discrimination, bringing some reds, greens, and browns closer together.
- Build passedDeploy failedApproveReject
Protanomaly
Red-green simulation
Simulates altered red-cone response, changing the separation between some reds, greens, and grays.
- Build passedDeploy failedApproveReject
Protanopia
Red-green simulation
Simulates loss of red-cone discrimination; some reds appear darker against dark backgrounds.
- Build passedDeploy failedApproveReject
Tritanomaly
Fixed 0.6-severity simulation
Simulates altered blue-cone response; some blue-green and yellow-pink pairs become less distinct.
- Build passedDeploy failedApproveReject
Tritanopia
Illustrative simulation
Simulates blue-yellow confusion, changing the separation between some blues, greens, yellows, and pinks.
- Build passedDeploy failedApproveReject
Achromatomaly
Illustrative simulation
A desaturation approximation that reduces color intensity for comparison.
- Build passedDeploy failedApproveReject
Achromatopsia
Illustrative simulation
A grayscale approximation for reviewing content without hue cues.
Complete tool guide
Color Blindness Simulator guide
Preview a palette, interface sample, or image under eight color vision simulations. Compare each view with typical vision to find places where a chart, status indicator, or diagram relies too heavily on color alone.
Your input is processed in the current browser tab and is not sent to the application server.
Common use cases
- Reviewing chart series alongside their labels and legend
- Testing red and green status indicators before shipping
- Reviewing a brand palette for accidental collisions
- Verifying a screenshot, map, or diagram at a glance
How to use it
- 1
Edit the palette, or upload an image or screenshot to test.
- 2
Compare each simulation panel against the typical-vision panel.
- 3
Read the confusion warnings for pairs that collapse together.
- 4
Separate any failing pair by lightness, shape, or a text label.
Controls and results explained
Palette and image inputs
Edit swatches to compare individual colors, or load an image to inspect a screenshot, chart, or map.
Simulation views
Red-green and blue-yellow simulations use fixed transform matrices. The grayscale and muted-color views use desaturation approximations.
Confusion warnings
Warnings identify palette pairs that lose substantial separation after a transform. They are heuristic review prompts, not WCAG pass/fail results.
Worked examples
Review success and error indicators
Start with: An interface with red errors and green success states
- Load a screenshot and compare the red-green simulation views.
- Add the words Error and Success, then repeat the review.
Error + icon
Success + iconThe desired output is a design decision: preserve meaning even if the two colors look similar. Exact appearance depends on the screenshot.
Review a chart in grayscale
Start with: A chart whose series are distinguished only by color
- Load the chart and compare the typical-vision and achromatopsia views.
- Add direct series labels or distinct line patterns where identification is unclear.
Series A — solid line
Series B — dashed lineGrayscale is a useful stress test for reliance on hue. Check labels and data interpretation in the real chart too.
Simulation method
The red-green and blue-yellow views use the Machado, Oliveira, and Fernandes model in linear-light sRGB. Dichromacy uses full severity; anomaly views use a fixed 0.6 severity. This setting is an illustration, not a claim about a typical individual.
How pairs are flagged
The tool compares CIE76 color differences before and after simulation. A warning requires an originally distinct pair, a simulated difference below the tool’s threshold, and at least 40% loss of separation. These thresholds are application heuristics.
Design beyond hue
Give chart series text labels or patterns, and pair success/error colors with explicit messages. An image that remains understandable in grayscale is useful evidence, but it is not proof of accessibility.
Practical tips for better results
- Review lightness differences as well as hue, then verify the actual labels and symbols.
- Do not assume any named palette is safe for every viewer or chart.
- Compare both the image and its legend; preserve meaning when colors are difficult to distinguish.
Frequently asked questions
Does the simulator diagnose color blindness?
No. It transforms colors to support design review. It does not assess anyone’s eyesight or reproduce every individual’s experience.
Why are there no warnings for my image?
Pairwise warnings apply to the editable palette. Inspect uploaded images visually in the simulation panels; they are not automatically audited for every semantic color pair.
Does my image get uploaded?
The browser loads the image locally and applies SVG color filters. The application does not upload the image for simulation.
What to check before using the result
- Individual color vision varies. Fixed matrices and desaturation cannot reproduce every perceptual experience.
- A clean palette warning list does not establish accessibility or guarantee distinguishable image content.
References and further reading
Keep working
Related color & design
Continue with another focused tool from the same collection.
Color Picker and ConverterPick a color visually and convert between HEX, RGB, HSL, HSV, CMYK, and OKLCH.Color Contrast CheckerCheck WCAG 2.1 and 2.2 text contrast, explore suggested fixes, and view a separate APCA estimate.Color Palette GeneratorGenerate coordinated palettes from harmony rules, then lock and export them.Color Scale GeneratorTurn one brand color into a balanced 50 to 950 ramp with contrast checked.