Skip to content
Home The Impact of Color Contrast on Accessibility

The Impact of Color Contrast on Accessibility

blue pencil on a yellow background and a yellow pencil placed on a blue background

Me being an avid gamer, I see lots of live streams of games. One such game was a football game – where the streamer had used different mods to enhance the graphics along with the look and feel of the game. However, the background and text used in the scoreboard that shows different stats was so bad – that it was quite difficult to view the information.

I am sure you’ll must have also been in a similar situation where you must have come across a book or a website or something that you enjoy which is so fancy with slick color theme. But due to the flashy background and foreground color for the text or icon or any user interface control that has been used, it’s difficult to perceive that information. Isn’t this quite frustrating – you want to enjoy something, but you can’t perceive it!

In this digital era, where information is available through various online platforms, ensuring that everyone can access and understand content is vital. A pivotal role is played by the web designers and developers in creating an inclusive digital environment, and one key element that significantly contributes to accessibility is color contrast. In this blog, we will explore the impact of color contrast on accessibility and why it is essential for creating an inclusive digital experiences. Before we delve in, let’s understand what color contrast is along with accessibility requirements.

Color Contrast? What’s that …

To put it simply, color contrast refers to the difference in color between two elements, such as foreground color and its background. A good color contrast ratio ensure that information is perceivable by people with visual impairments, such as those with low vision or color blindness. As per Web Content Accessibility Guidelines (WCAG) there are two different sets of contrast requirements – text and non-text contrast.

Text Contrast Requirements

As per WCAG Success Criteria 1.4.3: Contrast (Minimum), there is separate requirement for standard text and large text.

  • Standard text – below 18pts or 14pts bold – contrast ratio requirement = 4.5:1
  • Large text – above 18pts or 14pts bold – contrast ratio requirement = 3:1

For more information on meeting the text contrast ratio requirement – refer Meeting Color Contrast with a Difference

At Level AAA, as per WCAG SC 1.4.6: Contrast (Enhanced) this requirement changes to 7:1 for standard text and 4.5:1 for large text respectively.

Note: Logo types (text that is part of logo or brand name) are exceptions. Other exceptions consists of inactive controls, decorative content, incidental text, information available in alternate accessible formats, colors changes by user agents, brand guidelines and so on.

Non-Text Contrast Requirements

Different icons placed side by side such as Magnifying Glass, Gear Icon, Settings Icon, Message Icon and so on

Similarly, there’s another requirement for the non-text elements like icon/images, focus indicators, and user interface controls. The requirement under WCAG Success Criteria 1.4.11: Non-Text Contrast states that the color contrast ratio for the non-text elements should be 3:1 against adjacent colors. For more information on the non-text requirement – refer Decoding WCAG 1.4.11 Non-text Contrast.

Types of Color Blindness

Every user perceives the content differently. Let’s see how various people with color-blindness see a web page. Here are some of the simulated views with different types of color-blindness.

Normal View

Example section of a webpage in Normal View

Protanomaly

Color blindness that has reduced sensitivity to red light

Simulated view of section of BarrierBreak website in Protanomaly mode

Deuteronomy

Color blindness that has reduced sensitivity to Green

Simulated view of section of BarrierBreak website in Deuteronomy mode

Tritanomaly

Color blindness that has reduced sensitivity to Blue

Simulated view of section of BarrierBreak website in Tritanomaly mode

Achromatopsia

Color blindness that has reduced or no sensitivity to colors – can only be perceived as black, white and shades of gray

Simulated view of section of BarrierBreak website in Achromatopsia  mode

More Types of Color Blindness

Some other types of color blindness can be found below.

  • Total color blindness
  • Tritanopia
  • Dichromacy
  • Monochromacy
  • Trichromacy
  • Protanopia and deuteranopia
  • Normal color vision
  • Cone monochromacy

So, the key point to remember with regards to the contrast is that information SHOULD be perceivable to people with different types of color blindness.

Impact of Poor Contrast

Now, let’s understand the impact if the above accessibility requirements are not met.

  1. People with Low Vision or Color Blindness: Without enough contrast between the foreground and the background/adjacent color of the text, key icons/images, focus indicator, and user interface controls, people with low vision often struggle to perceive the information.
A section of webpage with bad text contrast having orange color background and red color text on it

Insufficient contrast can result in illegible text or making it challenging for users with visual impairments to consume the content. Designers must be mindful of choosing color schemes to avoid combinations that may be indistinguishable for people with color blindness. By adhering to color contrast guidelines, designers can enhance legibility and make information accessible to a broader audience. Otherwise, be prepared to lose your audience/customer.

2. User Experience: Having a good contrast not only helps people with disabilities but also helps people in general. Say you are operating a game control where there are different icons or text used to convey information with bad colors like – black background with dark grey icons/text. Won’t it be difficult to see which button will perform what action? Won’t you be frustrated as it might take some time to understand the information – which could make it difficult to perform those awesome combos!

Similarly, if you are waiting on a signal and to indicate the direction in which the vehicles can go is using arrows that are difficult to see since the colors used are darker in shade for the background and the arrows. When colors with sufficient contrast are used, it can enhance the user experience to a great extent.

3. Ethical Responsibility and Legal Consequences: Adhering to color contrast standards can help to conform with two of the many such success criteria outlined in the Web Content Accessibility Guidelines (WCAG). It is not only ethically responsible but also legally mandated in many regions around  the globe. Governments and organizations worldwide are increasingly recognizing the importance of digital accessibility, and failure to comply with these standards may result in legal consequences which will not be cheap.

4. Other Situations: It can also impact in certain other situations like below:

  1. Situational Disabilities – When you are browsing in sunlight or in a restaurant with dark low lighting and so on.
  2. Elderly Users – Ageing could affect the perceiving power. Good contrast will help to see things clearly and with less stress on the eyes.

So, you can see how impactful the color contrast is when it is not considered – it not only impact people with disabilities but also people in general along with having legal obligations. Being an accessibility professional myself I could say its one of the low hanging fruit – but sadly it’s one of the most common issues found on websites/documents. Some insightful user stories of people with disabilities (including people with colorblindness) can be found on WAI – User Stories.

Some tips for Improving Color Contrast

  1. Using Sufficient Contrast Ratios: Follow the WCAG guidelines for minimum contrast ratios for different elements between foreground and background/adjacent colors.
  2. Shift Left Approach: Ensuring that the color requirements along with other accessibility requirements are thought of from the initial phase of developing the product – rather than after completion.
  3. Accessible Color Pallete: Defining a color pallet for the product that consist of colors that meet the color contrast ratio requirement.
  4. Provide Alternatives for Critical Information: In cases where color is used to convey critical information, such as error messages or alerts, provide alternative methods of communication, such as text labels or icons, to ensure that the message is clear to all users.

To conclude, the impact of color contrast on accessibility is profound and extends far beyond mere aesthetics. By ensuring to prioritize the color contrast during the design phase itself, or rather a better approach would be in the Design Systems, Iconography used along with the style guide, we can create digital experiences that are inclusive and welcoming to users of all abilities. As the digital space continues to evolve, it is vital that designers and developers embrace accessibility as a fundamental aspect of their work. This will help in empowering everyone to access and engage the online content without or less barriers.

This article by Fahad Lambate is a part of our BB Geek series where BarrierBreak team members share their expertise on accessibility and inclusion, drawing from their extensive experience in the field.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top