How Color Blindness Simulator works
This color blind color checker works on a pair of colors rather than a photo. Give it two hex codes and it simulates both under protanopia, protanomaly, deuteranopia, deuteranomaly, tritanopia, tritanomaly, achromatopsia and achromatomaly, then measures the contrast ratio between the two simulated colors in every case. With the default green #16a34a and red #dc2626 the pair drops to 1.01:1 under deuteranomaly, the most common type, which means the two look like the same swatch. The verdict line reports the worst case across all eight types and tells you whether color alone is enough to carry the meaning.
Green and red status colors under each type of color blindness
Output for the default pair, First colour #16a34a (green) and Second colour #dc2626 (red). To normal vision the pair has a contrast of 1.47:1 but an obvious hue difference.
| Type | Green becomes | Red becomes | Contrast | Still tell apart? |
|---|---|---|---|---|
| Protanopia | #535460 | #8d8c26 | 2.11:1 | Hard to tell apart |
| Protanomaly | #307455 | #bb6326 | 1.31:1 | Effectively identical |
| Deuteranopia | #4b4065 | #98a526 | 3.49:1 | Distinguishable |
| Deuteranomaly | #327f57 | #b85526 | 1.01:1 | Effectively identical |
| Tritanopia | #1d7174 | #d32626 | 1.11:1 | Effectively identical |
| Tritanomaly | #1b8b5a | #d62626 | 1.17:1 | Effectively identical |
| Achromatopsia | #6f6f6f | #5c5c5c | 1.33:1 | Effectively identical |
| Achromatomaly | #46865e | #964444 | 1.51:1 | Hard to tell apart |
Worst simulated contrast 1.01:1. Verdict: No, add a label, icon or pattern.
The eight types of color vision deficiency the tool simulates
Names ending in -anopia mean one cone type is missing. Names ending in -anomaly mean the cone is present but shifted, which gives a milder version of the same confusion.
| Type | What is affected | How common | Pure red #ff0000 becomes | Pure green #00ff00 becomes | Pure blue #0000ff becomes |
|---|---|---|---|---|---|
| Protanopia | No working red (long wavelength) cones | About 1% of men | #918e00 | #6e713e | #0000c1 |
| Protanomaly | Reduced red sensitivity | About 1% of men | #d05500 | #2faa20 | #0000df |
| Deuteranopia | No working green (medium wavelength) cones | About 1% of men | #9fb300 | #604d4d | #0000b3 |
| Deuteranomaly | Reduced green sensitivity | About 5% of men, the most common type | #cc4200 | #33bd24 | #0000db |
| Tritanopia | No working blue (short wavelength) cones | Rare, affects men and women equally | #f20000 | #0d6e79 | #009186 |
| Tritanomaly | Reduced blue sensitivity | Rare | #f70000 | #08bb2f | #0044d0 |
| Achromatopsia | No color vision, only light and dark | Very rare | #4c4c4c | #969696 | #1d1d1d |
| Achromatomaly | Partial color vision, colors look washed out | Very rare | #9e2a2a | #52c652 | #101084 |
Prevalence figures are rounded, commonly cited estimates. Simulated colors are the tool's own output.
Color pairs that fail, and one that passes
Each result is the Verdict panel for the two hex codes shown.
Pure red and pure green
First colour #ff0000, Second colour #00ff00
Original contrast 2.91:1, worst simulated contrast 1.36:1 (tritanopia). Protanopia gives 1.48:1. Verdict: No.
Blue and purple
First colour #2563eb, Second colour #7c3aed
Original contrast 1.1:1, worst simulated contrast 1.03:1. Effectively identical under seven of the eight types. Verdict: No.
Purple is blue plus red, so when the red signal weakens the two collapse together.
Green and brown
First colour #16a34a, Second colour #92400e
Original contrast 2.15:1, worst simulated contrast 1.08:1 (protanomaly). Verdict: No.
Yellow and blue
First colour #facc15, Second colour #2563eb
4.35:1 or better for all four red-green types, but 1.12:1 under tritanopia. Verdict: No.
A pair can be safe for the common red-green types and still fail for the rare blue-yellow type. The table shows which.
Dark green and light red
First colour #15803d, Second colour #fca5a5
Worst simulated contrast 3.25:1 (tritanomaly), every row Distinguishable. Verdict: Yes.
Same hues as the failing status pair. The fix was a large lightness gap, not a different red.
How the simulation and the verdict work
Each type has a fixed 3 by 3 matrix. The red, green and blue values of your color are multiplied through it to give new red, green and blue values, which are rounded and shown as a hex code. For achromatopsia the matrix is the standard grayscale weighting of 29.9% red, 58.7% green and 11.4% blue, so the result is always a gray. These matrices are widely used for quick design checks. They approximate color vision deficiency and are not a clinical model, and the -anomaly rows represent one fixed severity, although real anomalous vision ranges from barely noticeable to nearly as strong as the -anopia form.
After simulating both colors the tool calculates the WCAG contrast ratio between them, the same formula used for text contrast, which compares relative luminance on a scale from 1:1 to 21:1. That makes the verdict deliberately strict. Two simulated colors that keep a visible hue difference but have similar brightness are still rated Hard to tell apart or Effectively identical. A medium blue #2563eb next to an orange #f97316 is an example: most red-green color blind viewers can separate them, yet the worst case is 1.16:1 and the verdict is No.
Read a Yes as strong evidence that the pair is safe, including when printed in grayscale. Read a No as a prompt to look at the individual rows and at how the colors are used, not as proof that nobody can separate them.
How to fix a pair that fails
- Change lightness before hue. Making one color much darker and the other much lighter is what moved the green and red pair from 1.01:1 to a 3.25:1 worst case.
- Do not rely on color alone. A check mark and a cross, a text label or a different line style works for every type, including total color blindness.
- Label chart series directly on the lines or bars so nobody has to match a legend swatch to the data.
- Check the pair in both directions of use: as two fills next to each other, and as text on a background. The second also needs a normal text contrast check.
- Test every pair that carries meaning. This tool compares two colors at a time, so a five color chart palette needs each neighboring pair checked.
How to use it
- 1
Enter the First colour as a hex code or pick it with the color swatch. Three and six digit codes both work.
- 2
Enter the Second colour, the one that has to stay different from the first, for example the other status color or the next chart series.
- 3
Read the Verdict panel: Original contrast, Worst simulated contrast and the answer to Safe to rely on colour alone?
- 4
Go through the table row by row. Each row gives the simulated hex code of both colors for one type, the contrast between them and a Still tell apart? rating.
- 5
If the worst case is under 3:1, change the lightness of one color and check again, or keep the colors and add a label, icon or pattern.