Colorblind Simulator
Upload an image and preview how it looks with protanopia, deuteranopia, tritanopia, or full color blindness, then download the simulated result.
Colorblind Simulator — Drop in an image and instantly see how it would appear to someone with red-blind (protanopia), green-blind (deuteranopia), blue-blind (tritanopia), or fully colorblind (achromatopsia) vision. The simulation runs entirely in your browser on a canvas, pixel by pixel — your image is never uploaded to any server, so even private mockups and screenshots stay on your device. Pick a type, compare the original side by side with the result, and download the simulated PNG.
What is Colorblind Simulator?
The Colorblind Simulator is a free in-browser tool that re-renders an image as a person with a specific color vision deficiency would perceive it. It supports the three common dichromacies — protanopia (red weakness), deuteranopia (green weakness), and tritanopia (blue weakness) — plus achromatopsia, a fully monochrome (grayscale) view. Designers, developers, and accessibility reviewers use it to check whether charts, UI states, status colors, and infographics still make sense when color alone carries the meaning. Because roughly one in twelve men has some form of color vision deficiency, simulating these views before shipping helps catch designs that rely too heavily on color contrast that vanishes for part of your audience.
How to use Colorblind Simulator
- Drag an image onto the upload area, or click it to choose a PNG, JPG, or WebP file from your device.
- Open the Color vision type dropdown and choose Protanopia, Deuteranopia, Tritanopia, or Achromatopsia (pick None to see the unchanged original).
- The simulated preview updates automatically next to the original so you can compare the two side by side.
- Click any preview to open it in the zoomable lightbox and inspect details up close.
- Press Download to save the simulated image as a PNG, or Reset to clear it and try another picture.
Examples
Checking a red/green status badge
Upload a screenshot of a UI that uses red for 'error' and green for 'success', choose Deuteranopia, and watch the two colors collapse toward a similar muddy tone — a sign you should add icons or labels instead of relying on color alone.
Reviewing a data chart
Load a multi-series line or pie chart, switch between Protanopia and Tritanopia, and confirm each series stays distinguishable; if lines blend together, adjust the palette or add patterns.
Full grayscale legibility test
Pick Achromatopsia to flatten the image to luminance only; if text or key elements disappear, your design depends on hue rather than brightness contrast.
Frequently asked questions
- Which types of color blindness can it simulate?
- It simulates protanopia (red-blind), deuteranopia (green-blind), and tritanopia (blue-blind) using standard RGB transformation matrices, plus achromatopsia, which converts the image to a luminance-based grayscale. Choosing None leaves the original image unchanged.
- Is my image uploaded to a server?
- No. The whole simulation happens locally in your browser using an HTML canvas — the file never leaves your device and nothing is sent to any server, so it works offline and keeps private images private.
- What image formats and output can I use?
- You can load common raster images such as PNG, JPG, and WebP. The simulated result is always exported as a PNG so that transparency is preserved when present.
- How accurate is the simulation?
- It uses well-known linear color-matrix approximations that are great for spotting color-reliance problems in UI and graphics. They are a practical design aid, not a clinical or medical diagnostic tool, so treat the result as guidance rather than an exact reproduction of any individual's vision.
- Why are the simulated colors muted or shifted?
- Each deficiency removes or weakens one cone response, so colors that depend on that channel move toward the remaining ones. That collapsing of distinct hues into similar tones is exactly the effect you want to detect before shipping.
Related tools
Code to Image
Turn a code snippet into a polished, syntax-highlighted PNG card in your browser, with a theme, gradient or transparent background, and padding — no upload.
Color Contrast Checker
Check the WCAG contrast ratio between a foreground and background HEX color and see whether it passes AA and AAA for both normal and large text.
Color Mixer
Blend two HEX colors at a chosen ratio in RGB or Lab color space and read the resulting mid color back as a swatch and copyable HEX value.
Color Shades Generator
Turn one base HEX color into a Tailwind-style 50-950 shade scale, mixing toward white and black, each step with a swatch and copyable HEX.