While we all see color a little differently, there are an estimated 350 million colorblind people worldwide, with men being the most affected (about 8% of men and 0.5%).
Color blindness occurs when there’s a problem with the pigments in certain nerve cells, making it hard to distinguish the difference between certain colors.
Most people are born with color blindness (often, it runs in families), and some develop it over time. Factors like physical or chemical damage to the eye, damage to the optic nerve or parts of the brain that perceive color, cataracts, and age can also cause this.
Types of color blindness include:
99% of all colorblind people have red-green color blindness.
Deuteranomaly: The most common type of red-green color blindness, this mild form makes the green look redder.
Protanomaly: Another mild form causes red to look greener and less bright.
Protanopia and deuteranopia: Both types make the person unable to distinguish between red and green.
While less common, Tritanomaly makes distinguishing between blue and green and yellow and red challenging.
Tritanopia is when someone cannot tell the difference between blue and green, purple and red, and yellow and pink. This also causes colors to look less bright.
This uncommon form of color blindness is called monochromacy. Monochromacy is when someone has trouble distinguishing colors and sometimes causes light sensitivity.
There is no cure for color blindness, but special glasses or contact lenses, and visual aids can help — most people living with this disability can adapt to everyday life.
Since it affects so many people, it’s important to understand and be mindful when designing digital media.
To make your website, app, and other media color-blind accessible, avoid the following:
Relying on color to depict meaning: While it’s common to use colors to separate information, it shouldn’t be the only way you do this. Those who are color blind (and those who are blind or have low vision) will not know you are using different colors so they will miss out on its meaning.
Photographs without descriptions: Colorful photos can be hard to interpret by those who are color blind. Include an alt text description with clear, concise language to explain images.
Color filters or swatches without descriptive text: When including a swatch or filter, write out the name of the color depicted. For example, a green swatch should be labeled as such.
Text overlay on photos: Text-over photos can be hard to read. When doing this, turn down the photo's opacity so the text can be displayed clearly.
The following color combinations: The ideal contrast is black text on a white background, but that doesn’t mean you have to stay away from other colors — just be mindful of your choices. These matchups should be avoided to increase accessibility:
Red and green
Green and brown
Green and blue
Blue and gray
Blue and purple
Green and gray
Green and black
You can also check your site’s accessibility by using a color-blind simulator. This allows you to view your website as though you’re looking through the eyes of someone who is color blind.
If you think you or someone you know may be living with color blindness, tests are available online to check.