While you might know about color blindness, it can be difficult to imagine being color blind. In fact, many people think it means you can't see any color at all, which is not true. Full color blindness, or "Achromatopsia", only occurs in 0.00003% of males worldwide so it's exceedingly rare. Much more common is the inability to see, or tell the difference, between some colors.
What is color blindness?
Color blindness is the name for a group of different eye conditions that affect how a person perceives colors. Due to genetics, it is significantly more prevalent in men compared to women. Around 1 in every 12 men and only 1 in every 200 women have some form of color blindness, so it's probably more common than you'd have guessed!
These different eye conditions can be divided into three categories.
- Red-green color blindness (Deuteranopia and Protanopia)
- Blue-yellow color blindness (Tritanopia)
- Full color blindness (Achromatopsia)
Of those three, Red-green color blindness is by far the most common: roughly half of the men with color blindness have some form of deuteranopia, followed by one in fifty having protanopia. From there on the percentages quickly grow smaller: tritanopia and achromatopsia are both very rare at less than one in a hundred thousand or less.
But knowing that doesn't help understanding people's experience. That's where Polypane's simulators come in.
Color blindness simulators in Polypane
Polypane's simulators quickly let you see your site with eight common types of color blindness. For each eye deficiency we provide two simulators: one for the "full" deficiency, and one for a mild version of it.
Color blindness is a spectrum and can range from barely noticable to severe, so any simulator you use makes a choice where on that spectrum it sits. When a deficiency is less severe, the name ends in "-omaly" (like in "anomaly"). The name for the severe deficiency ends in "op(s)ia". Keep that in mind as we go through the various simulators:
Red-green color blindness
- Deuteranomaly
- Deuteranopia
- Protanomaly
- Protanopia
Blue-yellow color blindness
- Tritanomaly
- Tritanopia
Full color blindness
- Achromatomaly
- Achromatopsia
- Cerebral achromatopsia
The eye has three types of cones that can percieve color, and they roughly translate to red, green and blue. When one or more of those types of conest don't work well, it causes a specific type of color blindness.
Deuteranopia and protanopia are both grouped under red-green color blindness because both make it difficult to tell the difference between red and green. For deuteranopia, this means people lack the ability to see green properly, and for protanopia the ability to see red is diminished. This causes those colors to look similar.
Tritanopia describes people who have difficulty seeing blue, which they confuse with green and difficulty seeing yellow, which becomes like violet for them.
For people with achromatopsia, none of their cones work properly. That leaves the rods in their retina, which are used to distinguish between dark and light. These rods are more sensitive to light than the cones so that's why with normal vision it's possible for you to see in the dark, but also why you don't see color in the dark.
Real achromatopsia is very rare, and also causes blurred vision. Cerebral achromatopsia happens when users can no longer see color specifically due to damage to the brain, such as from a stroke, and is also very rare.
Turning on Color Blindness simulators in Polypane
Now lets see how you can simulate color blindness in Polypane. Turning on a simulator is straightforward and only takes three clicks. Each pane in Polypane has a Debug tools icon above it, and you can click it to open the list of available debug tools:
In it, switch to the "simulators" tab and click the simulator you want to turn on:
When you've turned it on, the debug tool icon has a small dot.
To see which debug tool is active you can hover the icon to show the active debug tool in the tooltip, or click it to see it in the overview.
Polypane has much more debug tools! Check them all out in our debug tool documentation
Designing and developing for color blindness
With a color blindness simulator active, you'll want to check if any of the colors you use no longer communicate well. In particular red and green, which are often used to signify something going wrong or well respectively.
When you find an issue, try to communicate the same information without color, like in text or with an icon. Make sure that you're not communicating info with color alone. By offering multiple indicators your designs become easier to understand for all your users.
Testing for other visual deficiencies and environmental circumstances
Color blindness is not the only visual deficiency Polypane can emulate. There are a number of other visual impairments as well as environmental circumstances that we can emulate. With these, you can test your site for things like glaucoma, tunnel vision, bright sunlight or even emulate how someone with dyslexia could experience your website.
Testing for this broad range of experiences is important. Not because each of them will give you a concrete issue to fix, but because all of them help you empathise with people's experience. This will help you make better design and development decisions in your project.
