Enhancing color accessibility for users with color blindness

Terms of use

Terms of Use

The use of this site and the content contained therein is governed by the Terms of Use. When you use this site you acknowledge that you have read the Terms of Use and that you accept and will be bound by the terms hereof and such terms as may be modified from time to time.

All text, graphics, audio, design and other works on the site are the copyrighted works of nasscom unless otherwise indicated. All rights reserved.
Content on the site is for personal use only and may be downloaded provided the material is kept intact and there is no violation of the copyrights, trademarks, and other proprietary rights. Any alteration of the material or use of the material contained in the site for any other purpose is a violation of the copyright of nasscom and / or its affiliates or associates or of its third-party information providers. This material cannot be copied, reproduced, republished, uploaded, posted, transmitted or distributed in any way for non-personal use without obtaining the prior permission from nasscom.
The nasscom Members login is for the reference of only registered nasscom Member Companies.
nasscom reserves the right to modify the terms of use of any service without any liability. nasscom reserves the right to take all measures necessary to prevent access to any service or termination of service if the terms of use are not complied with or are contravened or there is any violation of copyright, trademark or other proprietary right.
From time to time nasscom may supplement these terms of use with additional terms pertaining to specific content (additional terms). Such additional terms are hereby incorporated by reference into these Terms of Use.

Disclaimer

The Company information provided on the nasscom web site is as per data collected by companies. nasscom is not liable on the authenticity of such data.
nasscom has exercised due diligence in checking the correctness and authenticity of the information contained in the site, but nasscom or any of its affiliates or associates or employees shall not be in any way responsible for any loss or damage that may arise to any person from any inadvertent error in the information contained in this site. The information from or through this site is provided "as is" and all warranties express or implied of any kind, regarding any matter pertaining to any service or channel, including without limitation the implied warranties of merchantability, fitness for a particular purpose, and non-infringement are disclaimed. nasscom and its affiliates and associates shall not be liable, at any time, for any failure of performance, error, omission, interruption, deletion, defect, delay in operation or transmission, computer virus, communications line failure, theft or destruction or unauthorised access to, alteration of, or use of information contained on the site. No representations, warranties or guarantees whatsoever are made as to the accuracy, adequacy, reliability, completeness, suitability or applicability of the information to a particular situation.
nasscom or its affiliates or associates or its employees do not provide any judgments or warranty in respect of the authenticity or correctness of the content of other services or sites to which links are provided. A link to another service or site is not an endorsement of any products or services on such site or the site.
The content provided is for information purposes alone and does not substitute for specific advice whether investment, legal, taxation or otherwise. nasscom disclaims all liability for damages caused by use of content on the site.
All responsibility and liability for any damages caused by downloading of any data is disclaimed.
nasscom reserves the right to modify, suspend / cancel, or discontinue any or all sections, or service at any time without notice.

For any grievances under the Information Technology Act 2000, please get in touch with Grievance Officer, Mr. Anirban Mandal at data-query@nasscom.in.

New

See all

No notification found.

Enhancing color accessibility for users with color blindness

Infobeans

@Infobeans

February 16, 2024

Mobile & Web Development

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

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.

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

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:

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.
WebAim’s color contrast checker: You can provide two colors to see if they pass accessibility guidelines.
Color Oracle: a color blindness simulator for Windows, Mac and Linux, showing you what people with common color vision impairments will see.
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.
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!

Disclaimer

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.

Infobeans

Ensure Start-up Success with Expert...

kartikpatel