Topics In Demand
Notification
New

No notification found.

Enhancing color accessibility for users with color blindness
Enhancing color accessibility for users with color blindness

February 16, 2024

20

0

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).

Image showing distinction between normal vision, vision with protanopia and vision with deuteranopia

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).

Image shows distinction between normal vision, vision with tritanopia and vision with tritanomaly

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.

Image shows distinction between normal vision and vision with achromatopsia

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

image depicting ideal text readability

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.

how patterns and textures appear in normal vision
Normal vision
how patterns and textures appear in vision with tritanopia
Vision with tritanopia

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.

how colorblind people see colors

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

how text labels will look

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
how colors look for people with normal vision, protanopia and tritanopia

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! 


That the contents of third-party articles/blogs published here on the website, and the interpretation of all information in the article/blogs such as data, maps, numbers, opinions etc. displayed in the article/blogs and views or the opinions expressed within the content are solely of the author's; and do not reflect the opinions and beliefs of NASSCOM or its affiliates in any manner. NASSCOM does not take any liability w.r.t. content in any manner and will not be liable in any manner whatsoever for any kind of liability arising out of any act, error or omission. The contents of third-party article/blogs published, are provided solely as convenience; and the presence of these articles/blogs should not, under any circumstances, be considered as an endorsement of the contents by NASSCOM in any manner; and if you chose to access these articles/blogs , you do so at your own risk.


© Copyright nasscom. All Rights Reserved.