How designers can make websites more accessible for the millions affected by color blindness

Color blindness occurs when nerve cells in the eye, called cones, aren't working correctly and cannot process light and images to help the brain recognize color. These cones are sensitive to certain colors like red, green, or blue because of the pigments inside them, but if a few pigments are missing, people become unable to distinguish all colors.

Very few people are colorblind, so some refer to this condition as color vision deficiency. People with this condition often can't distinguish red from green colors or, more severely, identify blue from yellow. Most people with this rarer condition also often can't tell the difference between red and green.

Most cases of color vision deficiency are genetic and are passed down from parents. Because the genes that cause it are found on the X chromosome, men are more likely to have it. People assigned males at birth only need one parent to get the gene, while females must have them from each parent. Intersex people have different X and Y chromosome combinations and would need all of their X chromosomes to have the gene for color deficiency to surface.

Color vision deficiency can also happen later in life due to disease or injuries, such as retinal detachment or glaucoma.

There are several inclusive design principles to make websites accessible for people with color vision deficiencies.

The most basic is to avoid red-green color scales. Instead, try using different shades of the same color or patterns. Data visualization expert Andy Kirk suggests swapping out the red for a more pink color and the green for a more lime color.

Another way Kirk suggests to overcome the red-green color vision deficiency is to use helpful texts or symbols—in addition to the color coding—that can clue a reader in. This is known as redundant encoding and can be accomplished by labeling and using text to describe trends or highlight key elements. Similarly, icons or symbols can help convey what you mean.

In addition, many design programs and websites have colorblind checkers or presets to see how different people will absorb the same image or graphic. Web browsers such as Chrome and Firefox have extensions that can help you simulate what a person with a color deficiency sees. Coblis is another website where you can upload images to check how those with color vision deficiencies see them.

Alternative text should also be provided for those with low vision or other vision impairments. Simply called alt text, this text describes a photo or image separate from a photo caption. To help understand the text on screen, people with vision impairments also rely on screen readers that describe photos, graphs, and other images. However, these readers can only work properly if alt text is set up correctly. It can also be helpful to use alt text only for important images or screenshots. Prioritizing alt text for images and graphics conveying critical information—rather than images that are more for decorative purposes—can lessen confusion for readers who use assistive technology.

A good rule of thumb is to use complete sentences that are brief but detailed. Rather than writing down "three people with city background," consider typing, "Three professionals in business attire are walking with their suitcases while seemingly having a chat." Rather than identifying an image as a picture, as in "image/picture of…," go right ahead and describe the photo. Screen readers already identify images as such, so introducing them as photos becomes redundant.

These are some ways design can be more approachable for those with color vision deficiencies. No matter what step you take, designing for some usually opens the door even more.

As design leader Susan Goltsman said: "Inclusive design doesn't mean you're designing one thing for all people. You're designing a diversity of ways to participate so that everyone has a sense of belonging."

Story editing by Carren Jao. Additional editing by Kelly Glass. Copy editing by Paris Close. Photo selection by Ania Antecka.