What is color blindness?
A color blindness simulator shows you an image the way someone with a color vision deficiency sees it. Drop in a chart, a screenshot or a photo, and you get eight views side by side: your original, plus the seven common types of color blindness. It runs in your browser. There's no account, and the image never leaves your device.
Color blindness is common. About 8% of men and about 0.5% of women have some form of it. Picture a room of 50 people: odds are at least two of them see your chart differently from you. Almost all of those cases are red-green. Very few people see no color at all.
Three cones, three ways to lose one
Your retina has three kinds of cone cells. One is tuned to long wavelengths (reds), one to medium (greens) and one to short (blues). Every color you see comes from comparing how strongly the three respond. Take one away, or shift its tuning, and some colors that look different to most people start to match.
The names follow a simple pattern. The prefix says which cone is involved: prot- for red, deuter- for green, trit- for blue. The suffix says how badly. -opia means the cone is missing. -anomaly means it's there but shifted, so colors look weaker instead of disappearing.
| Type | What's different | How common |
|---|---|---|
| Deuteranomaly | Weak green cones | ~5% of men, the most common type |
| Protanomaly | Weak red cones | ~1% of men |
| Protanopia | No red cones | ~1% of men |
| Deuteranopia | No green cones | ~1% of men |
| Tritanomaly | Weak blue cones | Rare |
| Tritanopia | No blue cones | Rare |
| Achromatopsia | No color at all | About 1 in 30,000 |
How the color blindness simulator works
Every type of color vision is modeled as a small piece of math. Each takes a red-green-blue color and returns the color that viewer would perceive. The tool uses the models color scientists publish. Viénot 1999 covers protanopia and deuteranopia. Brettel 1997 covers tritanopia, which needs two projection planes, not one. Machado 2009 covers the three weaker forms, set to a medium severity of 0.6. For achromatopsia, it's the plain Rec. 709 luminance formula.
The detail that matters most is where the math runs. Screens store colors with a gamma curve, so the number 128 does not mean "half as bright as 255." The simulator decodes each pixel to linear light, applies the model, clamps the result and encodes it back. Skip the decode and every color comes out wrong, even though the output still looks convincing.
The quick test for any simulator: give it pure red, #FF0000, and ask for the achromatopsia view. The correct answer is a mid grey, #7F7F7F, because red is about 21% as bright as white. A simulator that skips the linear-light step returns #363636, a near-black. Some older simulators still ship that bug.
Here's one worked example from the sample chart the page opens with. The "North" line is #D62728, a standard chart red. The "South" line is #2CA02C, a standard chart green. With deuteranopia, North becomes #7F7F13 and South becomes #8A8A32. Those are two olives a few shades apart. With deuteranomaly, the most common type, North turns a muddy brown (#A56820) and South a muddy olive (#829034). The lines are still there. Telling them apart takes effort. Matching them to the legend is guesswork.
Common chart colors under each type of color blindness
Below is how everyday colors come out of each model in the Color Blindness Simulator. Every value was produced by the same code the tool runs. Search your own palette's hex codes here, or drop a screenshot into the tool to see all seven at once.
| Color | Original | Protanopia | Deuteranopia | Tritanopia | Deuteranomaly | Achromatopsia |
|---|---|---|---|---|---|---|
| Pure red | #FF0000 | #5E5E0D | #939300 | #FF004E | #C37600 | #7F7F7F |
| Pure green | #00FF00 | #F2F200 | #DBDB29 | #79E9FF | #CDE52E | #DCDCDC |
| Pure blue | #0000FF | #0000FF | #0000FF | #006288 | #0036FD | #4C4C4C |
| Chart red | #D62728 | #56562B | #7F7F13 | #D71D4B | #A56820 | #6F6F6F |
| Chart green | #2CA02C | #98982B | #8A8A32 | #5393A8 | #829034 | #8B8B8B |
| Chart orange | #FF7F0E | #959515 | #B2B200 | #FF7388 | #D69F00 | #A3A3A3 |
| Chart blue | #1F77B4 | #7171B4 | #6767B5 | #007E98 | #3E70B4 | #727272 |
| Mid grey | #808080 | #808080 | #808080 | #808080 | #808080 | #808080 |
Three patterns jump out. First, under protanopia and deuteranopia, reds, greens and oranges all slide onto one yellow-olive scale. The only thing left separating them is brightness. Pure red and pure green still differ a lot in brightness, which is why a red stop sign and a green field don't blur together. Chart red and chart green were picked to look balanced, so they sit close in brightness and collapse.
Second, blue barely moves in the red-green views. Chart blue becomes #6767B5 under deuteranopia, still clearly blue, while chart orange becomes #B2B200, a yellow. That's why blue and orange is the classic pair that holds up for the most common types.
Third, the greyscale column holds a surprise. Chart red becomes #6F6F6F and chart blue becomes #727272. Those two greys are almost identical. So a chart that's fine for red-green viewers can still fall apart when someone prints it in black and white. Greys stay grey in every column, and white and black never change.
When to check a design for color blindness
The question is almost always the same: does my chart survive? A few places where the answer is usually "no":
- Status colors. A green dot for "passing" and a red dot for "failing" on a dashboard. The two dots match in the most common views, and the dashboard stops meaning anything.
- Red-to-green heatmaps. The scale runs from bad to good through colors that land on the same olive. The middle of the scale reads the same as both ends.
- Legends that only use color. Four lines, four swatches, no labels on the lines. The sample chart on the page does exactly this on purpose. Check its deuteranomaly tile and try matching North and South to the legend.
- Maps, worksheets and signs. A teacher's color-coded answer key, a transit map, a warehouse floor plan. Anything where color carries meaning and nothing else does.
This check has a long history of being harder than it should be. Accessibility proofing tends to live inside design-suite subscriptions, where you pay per seat for a whole team so one person can flip a view mode. The web alternatives often upload your unreleased mockup to a server and show one filter at a time, with a page reload for each. This page does one thing: all seven views at once, on your own machine, with nothing to install or sign into. That's the whole tool, not a teaser for a bigger one.
Limits and gotchas worth knowing
It's a close model, not someone's actual eyes. Color vision varies even between two people with the same diagnosis. The weaker forms are shown at severity 0.6, but in real life they range from barely noticeable to almost the full -opia. Treat a tile that looks fine as "probably fine," and a tile that collapses as a real problem.
- Grey images look identical in every tile. That's correct. Black, white and grey have no color to change, so a scan or a black-and-white document gives eight matching views.
- Some phone photos won't open. Many phones save photos as HEIC, and browsers can't decode HEIC files. Run the photo through the HEIC to JPG converter first. The tool reads the file header, so a HEIC renamed to .jpg is still caught.
- The size limit is 50 MB and 12,000 pixels per side. Past that, shrink the file with the image compressor and bring it back.
- Animated GIFs use the first frame only. The page tells you when that happens.
- The tiles are previews. They render from a copy scaled to 1,200 pixels on the long side, so the page stays fast. The Download button reruns the selected type at your image's full resolution.
If your chart fails a tile, don't panic and don't redo everything. Usually one fix is enough. Put labels directly on the lines, add icons or patterns next to the colors, or pick two colors that differ clearly in lightness. Then drop the fixed version back in and check again.
Related color tools
If the color blindness simulator shows a problem, the fix is usually a better palette. The color palette generator builds sets of colors you can test here. The hex color picker gets you the exact code for any shade. The color converter turns HEX into RGB, HSL or HSV, which helps when you want to push one color lighter without changing its hue. And if a design brief says "use the sage green," the color name finder tells you what a given hex code is actually called.
Frequently asked questions
Is this a color blindness test?
No. A test tells you whether you are color-blind. The usual kind is a set of dotted plates with a number hidden in them, and a real diagnosis comes from an eye doctor. A color blindness simulator does the opposite job: it shows how an image looks to someone who is color-blind. If you want a color blind test image to share, you can make one here. Drop in a picture, then download the simulated view.
Why is color blindness more common in men?
The genes for the red and green cones sit on the X chromosome. Men have one X, so a single altered copy is enough to cause red-green color blindness. Women have two, and the working copy usually makes up for the other one. That's where the rough 8% of men versus 0.5% of women comes from. Blue-cone types are linked to a different chromosome, which is why they're about equally rare in both sexes.
If I'm color-blind myself, what will the tiles look like to me?
Your own type's tile should look almost the same as the original to you. That makes sense: the simulation removes information your eyes already don't pick up. The math shows it too. Run the protanopia model on its own output and nothing changes, because the colors are already on the plane a protan sees. The other tiles can still help. They show you which colors other people are distinguishing.
Why does red turn dark in one view and bright in another?
People without working red cones lose sensitivity at the long-wavelength end of the spectrum, so reds really do look darker to them. Pure red becomes #5E5E0D, a dark olive, under protanopia. With deuteranopia, the red cones still work, so the same red looks brighter, #939300. That difference is real. It's also why a red warning on a dark background can nearly vanish for protan viewers.
Can I simulate a whole website?
Take a screenshot and paste it straight onto the page. The tool accepts pasted images, not just dropped files. A full-page screenshot works as long as it stays under 12,000 pixels on its longest side. There's no URL mode and no browser extension on purpose. A screenshot does the same job without giving anything permission to read every site you visit.
Does the download keep transparency and full size?
Yes to both. Transparent areas stay transparent in every tile and in the download. They're never flattened onto white or black, so a logo on a transparent background comes out ready to reuse. The download is a PNG at the full pixel size of your original, named after your file and the type, like logo-deuteranopia.png.