Enhancing color accessibility for users with color blindness

In this blog, we’ll explore what color blindness is, why it’s important to address color accessibility, and practical tips for enhancing color accessibility to ensure inclusivity for everyone.

Colors are an integral part of our lives. They make things look beautiful, affect how we feel, and help us understand things like signs and traffic lights. They’re an integral part of how we see and experience the world. But for individuals with color blindness, the world looks less colorful and a little dull. It changes how they see things.

Understanding color blindness

Color blindness is a reduced ability to distinguish between colors when compared with the standard for normal human color vision.

When someone has color blindness, he might find it difficult to tell the difference between specific colors like yellow and orange, green and brown, pink and gray, or blue and purple. It’s also called Color Vision Deficiency (CVD).

Normal color vision is also called trichromacy.

Red-green color blindness: This is the most common type of color blindness. People with red-green color blindness have difficulty distinguishing between shades of red and green. There are two main subtypes of red-green color blindness: protanopia (inability to perceive red light) and deuteranopia (inability to perceive green light).

Blue-yellow color blindness: This kind of color blindness makes it hard for people to tell the difference between different shades of blue and yellow. The two main subtypes are Tritanopia (inability to perceive blue light) and Tritanomaly (reduced sensitivity to blue light).

Total color blindness (Achromatopsia): In rare cases, individuals may have total color blindness, where they cannot perceive any colors at all. They see the world in shades of gray.

There are many online tools, such as enchroma and colormax, where you can check your color vision.

Why color accessibility matters

Making colors easier to see isn’t just for a small group of people. It’s about being fair to everyone and making sure everyone can understand things.

• By designing with color accessibility in mind, you can reach a broader audience.
• In various countries, there are regulations and laws, such as the Americans with Disabilities Act (ADA), that mandate accessibility standards for digital content and public services.
• Clear color choices and contrasts can enhance the overall user experience, making your content or product more user-friendly.

Practical tips for enhancing color accessibility

Now that we understand the importance of color accessibility, let’s explore some practical tips to achieve it.

1. Text readability

To make sure that text is easy to read, we need to check if it follows accessibility rules. These rules look at things like the colors of the text and the background, as well as how big the text is.

WCAG 2.0 level AA requires a color contrast ratio of 4.5:1 for normal text and 3:1 for large text. You can check it here – WebAim color contrast checker

2. Text overlaid on background images

Putting words on top of pictures can be tricky because sometimes the picture doesn’t have enough difference in brightness or color compared to the text.

When you make the background less see-through, it makes the text stand out more, which makes it easier to read.

3. Use patterns and textures

Here’s how a color blind person with tritanopia might see a blue-green bar graph versus how they’d see the same graph with patterns and labels.

4. Use text labels

Adding text labels to color filters and swatches improves accessibility for color-blind users. Depending on the type of color blindness, users might find it difficult to differentiate between different colors (or shades) without some sort of descriptive text.

For example, without descriptive text color-blind users wouldn’t be able to differentiate between many of the options available.

Adding text labels to color filters improves accessibility for people with normal vision, as well.

5. Underline links

We often use different colors or make the text bold to show that something is a clickable link. But for people who see colors differently (like red or green), it’s not easy to tell links apart from regular text because the difference isn’t clear enough.

That’s why it’s smart to put a line under text links. It helps you quickly see which words are regular and which ones are clickable.

6. Color combinations to avoid

Certain color combinations aren’t ideal for color-blind users either because they have low contrast ratios or because they’re difficult to differentiate between.

Here’s a list of color combinations that you should avoid using in your interface designs wherever possible:

• green-red
• green-blue
• green-brown
• green-black
• green-grey
• blue-grey
• light green-yellow
• blue-purple

7. Make primary buttons standout

Often, designers use color to make important buttons noticeable. But this can be a problem because the color chosen might be hard for people with color blindness to see.

Here’s what you should do instead:

• Increase the size of your primary button.
• Try out different placement combinations.
• Increase contrast between primary and secondary buttons.
• Use borders, icons, or font weight to differentiate primary and secondary buttons.

8. Mark required form fields

Color-blind users might find it hard to tell which fields are required and which ones are optional if you only use color to show this on forms.

Instead:

• Mark required fields with an asterisk (*).
• Label fields with the word Required or Optional.

9. Tooling

There are lots of tools available to help you design for color-blind people:

1. Check My Colours: If you already have a website, you can simply input a web address (URL) and get feedback on what should be enhanced.
2. WebAim’s color contrast checker: You can provide two colors to see if they pass accessibility guidelines.
3. Color Oracle: a color blindness simulator for Windows, Mac and Linux, showing you what people with common color vision impairments will see.
4. The Adee Comprehensive Accessibility Tool is one of the most complete accessibility plugins on Figma. With this single tool you can generate alt-text, simulate 8 color-blind scenarios, check for contrast and even test your touch target size.
5. Coblis: You can upload or just drag and drop your image in the center of the simulator and see how an individual with a color vision handicap will visually interpret your images.

Final thoughts

Making colors easier to see is very important for making the world fairer and friendlier for everyone. When you make sure that your designs, websites, and products can be used by people who can’t see colors well, you’re helping to create a nicer and more equal place for everyone. And here’s the cool part: designing for accessibility doesn’t just help those with specific needs; it makes things better for everyone! So, it’s a win-win for both the people creating stuff and the people using it.

Adding color accessibility to your design process isn’t just a passing trend; it’s something we really need to do to make the world more inclusive. It’s time to recognize how powerful accessible design can be and make sure that everything we create is suitable for everyone, no matter if they can see colors well or not.

What other tips can help you design for accessibility? We’d love to know what to add to this list! Reach out to us