The information presented within this guide is aimed at website owners seeking to learn the ropes of web accessibility and to create a more inclusive online environment for people with disabilities, including people with color blindness. Technical elements are described in layman’s terms, and, as a rule, all topics pertaining to the legalities of web accessibility are presented in as simplified a manner as possible. This blog has no legal bearing, and cannot be relied on in the case of litigation.
As people spend more time online, inclusive design has become more important than ever, as it ensures everyone can access information. Yet, according to WebAIM, a nonprofit at the Institute for Disability Research, Policy & Practice at Utah State University, as much as 95.9% of home pages are inaccessible to those with disabilities. Imagine living with a disability and being shut out of almost all of the information on the internet. This prospect becomes even more daunting as more of the world adopts digital technologies.
One common impairment, especially in men, is color vision deficiency, or the inability to distinguish certain color shades. Roughly 1 in 10 men are born with some form of color deficiency, according to the American Academy of Ophthalmology. Despite this prevalence, not all designers think carefully about their chosen colors. For instance, graphics commonly include color scales, which can sometimes be difficult to differentiate. A small amount of thoughtfulness can make a big difference when designing visuals that communicate ideas to audiences.
With that in mind, we’ve compiled a best practices guide for vision deficiency-friendly design, taking insights from design firms, professional designers, and colorblind accessibility resources.
What is 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 completely color blind, 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 cannot 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 male at birth only need one parent to get the gene, while those assigned female at birth 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.
Designing for people who have color vision deficiency
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 color blind 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 the alt text is set up correctly.
It is important to use alt text only for meaningful images or screenshots. Providing detailed alt text for images and graphics conveying critical information—rather than images that appear for decorative purposes only —will prevent people who use assistive technology from being needlessly confused.
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. If the image in question is a screenshot, however, it is recommended to present it as such within the alt text.
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."