π¨ Color Blindness Simulator
Pick a color and see how it looks to people with protanopia, deuteranopia, and tritanopia.
How this color appears under each color vision deficiency
How to Use This Simulator
Choose a color with the picker or type a hex code. The picker and the text field stay in sync, and the four previews update live. Each preview also shows its WCAG contrast ratio against white and black.
Pick a color from your palette with the color picker, or type a hex code like #3b82f6 (3 or 6 digits, with or without the #).
Compare the Original swatch with the Protanopia (red-blind), Deuteranopia (green-blind), and Tritanopia (blue-blind) simulations side by side.
Check the WCAG contrast ratios of each simulated color against white and black. Aim for 4.5:1 or better for text.
If two colors in your UI become hard to tell apart under a simulation, add labels, icons, or patterns so color is not the only signal.
How the Simulation Works
Each simulation multiplies the original red, green, and blue values (0 to 255) by a 3x3 matrix and rounds the result. The protanopia matrix collapses the red channel, so reds lose their redness and darks get darker. The deuteranopia matrix collapses the green channel, confusing reds and greens. The tritanopia matrix shifts blue toward green. These are the standard matrices used by many accessibility tools. They are approximations, not medical diagnoses, but they are accurate enough to catch real design problems like red error text on a green success background.
Worked Example
Pure red #FF0000 is R=255, G=0, B=0. Under deuteranopia the matrix gives R = 0.625 x 255 = 159, G = 0.700 x 255 = 179 (178.5 rounded up), B = 0, which is #9FB300, a muddy yellow-green. So a red button and a green button that look clearly different to most people can look like two shades of olive to someone with deuteranopia. The same red under protanopia becomes R = 0.567 x 255 = 145, G = 0.558 x 255 = 142, B = 0.242 x 0 + 0 = 0, giving #918E00, darker and duller. This is why status indicators should pair color with text like "Error" or "Success", never color alone.
Designing for Color Vision Deficiencies
About 1 in 12 men and 1 in 200 women have some form of color vision deficiency, so this is not an edge case. The most common failure is red versus green: error states, form validation, charts, and status badges. A safe pattern is to use color plus a second channel: a checkmark or cross icon, an underline on links, a bold label, or a pattern fill on chart bars. For data visualizations, pick palettes that survive the simulations, such as blue and orange instead of red and green. Finally, test real contrast: a color that passes WCAG against white may fail badly for a color-blind user if its hue shifts, which is exactly what the ratios in this tool reveal.
Frequently Asked Questions
What is protanopia?
Protanopia is red-blindness: the red cones in the eye are missing, so reds look dark and muddy and get confused with greens and browns. It affects about 1 percent of men and 0.02 percent of women. In the simulator it is approximated with a standard matrix that remaps the red channel into green and blue.
What is the difference between protanopia and deuteranopia?
Both are red-green deficiencies, but protanopia is missing the red cones while deuteranopia is missing the green cones. Protanopia also makes reds look darker, which affects the perceived brightness of red text and buttons. Deuteranopia is the more common of the two, affecting about 1 percent of men.
What is tritanopia?
Tritanopia is blue-blindness: the blue cones are missing, so blues shift toward green and yellows toward pink. It is rare (about 0.001 percent of people) and, unlike red-green deficiencies, affects men and women equally. It is often acquired later in life through eye disease rather than inherited.
How do I design for color-blind users?
Never use color alone to carry meaning. Pair color with labels, icons, or patterns; make sure error states do not rely on red versus green alone; and check text contrast with the WCAG ratios shown in this tool. Tools like this simulator let you preview your palette through each deficiency before you ship.
What contrast ratio should text have?
WCAG 2.2 asks for at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold and up). A 3:1 ratio is the minimum for UI components like icons, form borders, and focus indicators. This simulator shows the contrast of each simulated color against both white and black so you can pick readable combinations.