Color contrast accessibility: why and how to be compliant

First, let’s frame some numbers around this challenge. Primarily, color blindness – also known as color vision deficiency (CVD) – is genetically inherited through a recessive X chromosome, and affects 1 in every 12 men (8%), but only 1 in 200 (0.5%) of females. That's approximately 4.5% of the world population, or (currently) more than 350 million people.

All babies are born color blind. Provided their X chromosome doesn't have the gene for red-green color blindness, as they grow, their color vision improves and is typically fully developed by the age of 6 months. Genetically, because of the recessive idiosyncrasies of our XX, XY sex chromosomes, a woman who is red-green colorblind, passes it to all her sons, but a father can’t pass his red-green color blindness to his sons.

But, the term colorblind is misleading.

That's why it’s also known as color vision deficiency (CVD), because most people who are affected, can see an array of colors, but the array isn’t as broad as someone who isn’t impacted by color blindness. Given this, all web design work needs to avoid creating color contrast accessibility issues, to ensure that colorblind people don’t feel excluded from enjoying the same digital experience as everyone else, in their daily life.

Using strong contrasting colors to help colorblind people distinguish different elements on a screen, makes it more user-friendly for everyone – not just those with color vision deficiencies.

Why contrast accessibility is important

People who are colorblind, may have trouble seeing the:

• Difference between colors
• How bright colors are
• Different shades of colors

Here’s two possible scenarios where these issues would play out:

• Jan is red-green color blind (see below) and can’t differentiate between certain colors, this means she can’t reliably understand information that relies on color for conveying its meaning.
• Joel has low vision, so there needs to be enough contrast between the focus/foreground color and background for him to read content, forms and buttons correctly.

The use of color must therefore be carefully considered when creating web content. Your color choices have a direct impact on the color accessibility of your site.

Contrast ratio for accessibility

For those people with color vision deficiency, the more contrast between foreground/focus color and background color (ie. higher the color contrast ratio) the easier it is for people to see. If low-contrast text is difficult to read on a desktop, it’s even more difficult on mobile, while walking in bright sunlight. Scenarios like this are a great reminder that accessible visual design delivers better design outcomes for all users.

Color contrast ratio requirements apply to text and graphics that are essential for understanding the content or functionality. Three success criteria in WCAG 2 address color contrast:

1. 1.4.3 Contrast (Minimum)

The minimum required contrast ratio (for text on a solid color background) is:

• 4.5:1 for a regular text
• 3:1 for a large text (18 to 14 point bold or font size)

2. 1.4.6 Contrast (Enhanced)

However, WCAG also recommends striving for an enhanced contrast ratio:

• 7:1 for a regular text and
• 4.5:1 for large text

3. 1.4.11 Non-text Contrast

An additional success criterion, 1.4.1 Use of Color, references the contrast ratio as part of the requirement for links that are differentiated by color alone.

Color vision deficiency simulator

To more easily understand the issues faced by people with slight to extreme vision problems, try using a tool like Web Disability Simulator to simulate:

• Color blindness
• Low vision
• Parkinsons
• Dyslexia
• Small vocabulary
• Concentration.

Often, by truly viewing things through another's eyes, you can better understand the limitations many people have to cope with, purely because the materials weren't designed to be accessible to everyone who should have access.