Color Blindness Accessibility: What Designers Need to Know

In a world where graphics dominate the digital landscape, color can be a central part of a brand’s identity. But too often, designers fail to consider how their color choices impact users with various disabilities. In particular, websites that rely too heavily on color to convey meaning may be inaccessible to people with color blindness.

By prioritizing color blindness accessibility, designers can ensure that users who are unable to perceive or distinguish between certain colors can navigate digital platforms without encountering barriers. In this post, we explore the importance of accounting for color blindness in web design, and offer tips for providing a more inclusive user experience.

What is color blindness?

Color blindness, otherwise known as color vision deficiency (CVD), is characterized by the inability or decreased ability to see and differentiate between certain colors. Approximately 13 million Americans experience color blindness, and it’s more prevalent among men than women.

There are many forms of color blindness, each characterized by a different range in individuals’ perception of color. To create accessible experiences, designers need to understand and account for this diversity. Here’s a quick summary of the most common types of color blindness.

Red-green color blindness

The most widespread form of color blindness, red-green color blindness makes it challenging to tell the difference between red and green. Red-green color blindness may be experienced in two ways:

• Deuteranopia: makes green look more red
• Protanopia: makes red look more green

Blue-yellow color blindness

Blue-yellow color blindness makes it hard to distinguish between blue and yellow. People with the most common type of blue-yellow color blindness, tritanopia, also have a difficult time telling the difference between blue and green, purple and red, and yellow and pink.

Monochromacy

People with monochromacy, also called complete color blindness, only see black, white, and shades of gray. Monochromacy is extremely rare and can be accompanied by a sensitivity to light.

What barriers do people with color blindness encounter online?

To create digital experiences that are accessible to people with color blindness, designers first need to understand the barriers that individuals with this condition encounter on the web. Let’s explore some of the digital elements that may be inaccessible to people who are color-blind, drawing on the firsthand experience of Joshua Nolte, a Level Access salesperson with deuteranopia—the most common form of red-green color blindness.

Charts, graphs, maps, and infographics

Color is often used to indicate different data sets and categories within digital charts and graphs. But without proper labeling, or alternate means of differentiation, these graphics can be nearly impossible for people who are color-blind to interpret independently.

Other visuals, like maps and infographics, may also rely on color alone to convey meaning. Someone who is color-blind, like Nolte, will need additional information to understand the visual accurately. Whether they use alternative cues or ask for assistance, their experience is now different from that of someone who isn’t color-blind.

“I came across a territory map that showed where people were located geographically, but the whole thing was color-coded,” Nolte says. “I had to ask for a text version instead and it just became a longer process.”

Signifying errors

When an error in an online form is only indicated with a red highlight or underline, people who are color-blind may struggle to identify the specific field where the issue occurred.

“I was filling out a form for work, and it said there was an error on the page, but I couldn’t figure out where I went wrong,” Nolte says. “The only indicator of an error was highlighted in red, which I couldn’t see. I spent hours going through and re-typing each section but ended up asking a friend to point out to me where I went wrong.”

This example touches on a common theme in the experiences of people with color blindness: wasted time. It takes more time for people with color blindness to maneuver through inaccessible site features because they often need to utilize additional strategies to work around barriers.

Text

For people with color blindness, website text can become inaccessible when the color contrast between the text and its background is low. Nolte gives an example:

“If you have a dark screen, the difference between blue and dark red text on a white backdrop with small font is going to be difficult or near-impossible to see.”

Insufficient contrast between text color and background is particularly problematic in hyperlinks. When hyperlinks don’t provide sufficient contrast, it becomes hard for people with color blindness to distinguish between clickable and non-clickable text. This may lead to missed opportunities to access the information presented in links.

Color-coded indicators

Web elements, such as buttons and status icons, that are only identifiable through color can be disorienting to people with color blindness.

Both buttons and status icons often use the same colors, red and green, to convey meaning. On buttons, green often signifies “next” or “submit” and red signifies “stop” or “close.” The same framework applies to status icons. Red usually means a person is “offline” or “inactive” and green means a person is “online” or “active.”

For individuals who are unable to distinguish between red and green, this color-coding system is meaningless—and can lead to confusion if there is no other way to differentiate between elements.

Does your website meet accessibility guidelines?

Get the WCAG checklist

Why is color blindness accessibility important for designers to understand?

Now that we’ve discussed why color blindness accessibility matters to users, let’s dive into its benefits for designers.

It results in more inclusive experiences

A web designer’s goal is to create an enjoyable experience for all visitors. If a group of users can’t engage with a website, it’s anything but a success.

Dana Randall, the Head of Accessible UI Design at Level Access, advocates for all kinds of disabilities through her inclusive design practices. As a UI design leader with over 23 years of experience, she is well-versed in the field, and has explored what it means to design for color blindness.

“I come at this from more of an emotional perspective,” Randall says. “I’ve spent a lot of my career building brands and learning about the role that color plays when it comes to conveying an emotion. But if you’re looking at this from an accessibility standpoint, your site either follows the rules or it doesn’t, it’s very pass/fail from a WCAG [Web Content Accessibility Guidelines] perspective.”

WCAG is a set of technical requirements for making web-based content, like websites, accessible for users of every ability, including people with color blindness. It provides a common global standard for web accessibility. Color blindness accessibility is usually assessed based on two WCAG criteria, Use of Color Alone (1.4.1) and Minimum Color Contrast (1.4.3). Neglecting these criteria can lead to a frustrating and time-consuming user experience for people who can’t perceive certain colors.

It expands business opportunities

Accessible design also has financial benefits for businesses. Ensuring color blindness accessibility allows an organization to serve a wider range of people, maximizing revenue.

Additionally, many organizations now prioritize accessibility in their procurement processes. By incorporating color blindness accessibility best practices, businesses will align with these requirements, making themselves more appealing to new clients who require documented proof of accessibility in the form of a Voluntary Product Accessibility Template® (VPAT).

It mitigates legal risk

Designing for color blindness helps mitigate the risk of a discrimination lawsuit regarding the inaccessibility of a website. In other words, ensuring color blindness accessibility in web design is one step toward ensuring compliance with regulations such as Section 508 of the U.S. Rehabilitation Act and the Americans with Disabilities Act (ADA). These laws aim to prevent discrimination against individuals with disabilities, including those with color blindness.

Failure to comply with both Section 508 and the ADA can have costly legal consequences, damaging a brand’s reputation and relationship with its audience. Because scanning tools can pick up whether a website is accessible for people with color blindness right away, color contrast failures make organizations easy targets for lawsuits.

Tips and best practices for making your website accessible for people who are color-blind

There are many factors to consider when making sure your website is accessible to people with color blindness. Here are a few best practices to keep in mind as you review existing designs or create new ones.

1. Use sufficient levels of color contrast. Choose color combinations that provide adequate contrast between text and background. This ensures that information will be legible, regardless of the color palette employed. WCAG criteria 1.4.3 provides minimum contrast requirements.
2. Don’t convey meaning through color alone. Incorporate alternate means of communication—use labels, texture, shapes, and patterns—to prevent confusion among people with color blindness. Any use of an alternate signal to convey meaning is acceptable. If you are unsure that your website will be usable for people with color blindness, Randall recommends flipping your design or website into grayscale. Reviewing the design in grayscale will allow you to identify any elements that become more challenging to understand when color is stripped away.
3. Avoid toggle options. Many websites offer a “color blindness friendly mode,” a feature that can be turned on and off. This toggle option changes certain colored elements into subtle patterns that signify meaning. While a great start, these features do not provide a universal experience for users and drive up operational costs. Rather than creating a separate option for people with color blindness, apply inclusive design principles to your work from the beginning.

Start your journey toward accessibility.

Contact us

Designing for color blindness benefits everyone

Designers strive to create experiences that people find beautiful, intuitive, and usable. And functionality is just as important as aesthetics when it comes to accessible web design.

Designers like Randall are driven by empathy for users and understand the repercussions of neglecting color blindness accessibility. “We fail at our jobs when we create things that are difficult to use or unpleasant to engage with,” Randall says. “With that lens, we may forget that not all people experience color the way we do, which is why it’s important for us to check our work through an experience beyond our own.”

By understanding web accessibility barriers and integrating color blindness accessibility best practices, designers will foster inclusivity, meet legal requirements, and improve the digital experience for all customers and users. However, until UI and UX designers understand the importance of color blindness accessibility, people with color blindness will continue to face frustrating barriers on the internet.

“If you ask just about anybody, they’re probably going to tell you that in an ideal world, everyone has the same access to the web,” Nolte says. “But this isn’t the case in our world. It’s not hard, it doesn’t take any more time or effort, it’s just a different way of doing things.”

Designing for everyone, including people with color blindness, is key to a successful digital accessibility practice. If you’re unsure whether elements on your site meet accessibility standards, you can test your website against our WCAG checklist.

 

eSSENTIAL Accessibility has changed its name to Level Access! Read More