How designers can make websites more accessible for the millions affected by color blindness
This story originally appeared on accessiBe and was produced and distributed in partnership with Stacker Studio.
How designers can make websites more accessible for the millions affected by color blindness
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, accessiBe 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 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.
Best practices for design that is accessible to 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 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.
