Color Blindness Simulator: See Designs Through Color-Blind Eyes
This color blindness simulator shows how your images and colors look to people with color vision deficiency (CVD). Drop in a screenshot, photo, or HEX color and instantly preview it as someone with deuteranopia, protanopia, tritanopia, or achromatopsia would see it.
Around 8% of men and 0.5% of women have some form of color blindness, so two shades that look obviously different to you can be indistinguishable to a large slice of your audience. Designers, developers, and accessibility testers use this tool to catch color clashes before they ship.
How to Use the Color Blindness Simulator
Add an image (or a color)
In Image mode, click the upload zone, drag and drop a file, or paste from your clipboard with Ctrl+V. You can also load a built-in sample (Fruits, Traffic, Nature) or capture a frame from your webcam. To check a single shade instead, switch to Color mode.
Pick a CVD type
Choose Deuteranopia (green-blind), Protanopia (red-blind), Tritanopia (blue-blind), or Achromatopsia (total color blindness). The simulation updates instantly.
Compare original vs. simulated
Drag the divider across the image to wipe between the original and the simulated view, or hit View all types to see every CVD simulation side by side in one grid.
Download or test the next color
Save the simulated image as a PNG (the CVD type is added to the filename) for documentation or bug reports. In Color mode, type any HEX code to see all four CVD swatches at once.
Features
Multiple Input Methods
Upload a file, drag and drop, paste a screenshot with Ctrl+V, capture from your webcam, or load a built-in sample image to get started fast.
Four CVD Types
Simulate Deuteranopia (green-blind, ~6% of men), Protanopia (red-blind), Tritanopia (blue-blind), and Achromatopsia (total color blindness).
Slider Comparison
Drag a divider to wipe between the original and simulated image so you can spot exactly which colors collapse together.
All-Types Grid
View the original and all four CVD simulations at once in a single grid for a quick, comprehensive accessibility check.
Color Mode
Test an individual HEX color with the picker or by typing a code, and see how it shifts across every CVD type as swatches.
PNG Export
Download the simulated image as a PNG with the CVD type in the filename for reports, tickets, or sharing with your team.
Science-Based Simulation
Built on the Brettel, Viénot & Mollon (1997) algorithm, a validated method for approximating color vision deficiency.
Private & Client-Side
All processing happens in your browser. Images are never uploaded or stored, and once loaded the tool works offline.
Frequently Asked Questions
What does a colorblind person see?
People with color vision deficiency have trouble telling certain colors apart. The most common forms affect red-green perception, so reds, greens, oranges, and browns can blur together; rarer forms affect blue-yellow, and a very rare type removes color entirely. This simulator recreates each of those views so you can see the effect for yourself.
What are protanopia, deuteranopia, and tritanopia?
Deuteranopia is green-blindness and the most common type, affecting roughly 6% of men. Protanopia is red-blindness (about 1% of men). Tritanopia is blue-blindness, which is rare (under 0.1%). The tool also includes Achromatopsia, total color blindness, which is very rare.
How accurate is this color blindness simulator?
It uses the Brettel, Viénot & Mollon (1997) algorithm, a scientifically validated method for simulating color vision deficiency. No simulation can perfectly replicate another person's vision, but it gives a reliable approximation that is more than good enough for accessibility testing.
How do I check if my design is colorblind-friendly?
Upload a screenshot of your design and start with Deuteranopia, the most common type. If important colors still look distinct, check Protanopia and Tritanopia too. When two colors become identical in the simulation, people with that condition cannot tell them apart, so add a second cue like a pattern, icon, or label.
Are my images uploaded to a server?
No. All image processing happens entirely in your browser using JavaScript and the Canvas API. Your images and any webcam frames never leave your device, so your work stays completely private.
What image formats and sizes are supported?
It works with common formats your browser can read, including JPEG, PNG, GIF, and WebP. PNG transparency is preserved because the alpha channel is left untouched during simulation. Images larger than 2000 pixels are automatically resized (keeping the aspect ratio) for smooth performance.
Can I use this for WCAG accessibility testing?
It helps you find color combinations that are hard to distinguish for color-blind users, which is one part of accessibility. Full WCAG compliance also depends on contrast ratios, so pair this simulator with a contrast checker for complete coverage.
No comments yet. Be the first to comment!