Color contrast accessibility: why and how to be compliant

In 1793 the scientist, John Dalton, wrote the first paper on color blindness. At the time, he incorrectly believed his own color blindness was caused by a discoloration in the aqueous humor of his eyes. However, color blindness is driven by genetics. And, contrary to popular thought, ninety-nine percent of all colorblind people can, in fact, see color… but they see it differently, which directly impacts the creation of web content and documents, web design and color

Di Mace

Communication strategist

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.

Color blindness is linked to an anomaly on the X chromosome, and because males only carry one X chromosome, if their X chromosome is defective, they’re generally colorblind.

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.

TL;DR Key color contrast accessibility issues

The World Wide Web Consortium (W3C) has established accessibility color contrast guidelines that should be adhered to when designing digital content for users with a visual impairment (temporary or permanent).

  • Indicate an action
  • Prompt a response, or
  • Distinguish a visual element

What is color contrast accessibility?

Color contrast accessibility affects the readability of your digital and print content. It’s caused by poorly designed materials that haven't considered the decreased ability of users – who have low vision, color vision deficiency or are colorblind – to see certain colors or distinguish differences in color.

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.

What is color blindness?

Color blindness occurs when the light-sensitive tissue (cones) in the eye’s retina don’t properly respond to the variations in wavelengths of light that enable people to see different colors. About 60% of your eye cones are red-sensitive, 30% are green-sensitive, and less than 10% are blue-sensitive.

Therefore, the type of color blindness experienced depends on which cone cells are dysfunctional or missing: red, green, or blue.

Types of color blindness

Because your red, green and blue cones can malfunction separately, there are multiple subtypes within each main type of color blindness.

1. Red-green color blindness

By far the most common form of color blindess is red-green. Here, there’s a problem with your red or green cones – which means the eye is unable to distinguish between certain red and green shades.

Types of Red-Green Color Blindness

Overall Effects

Trouble distinguishing between some shades of red, yellow, and green.

Disrupts color perception but does not affect visual acuity.

4 Subtypes of red-green color blindness


Occurs when the M-cones (medium wavelength cones) of the eye are dysfunctional. Causes green to look redder.


Occurs when the L-cones (long wavelength cones) of the eye are dysfunctional. Causes red to look greener.


Occurs when the L-cones of the eye are missing. Causes trouble in differentiating between red and green.


Occurs when the M-cones of the eye are missing. Causes trouble in differentiating between red and green.

Two subtypes of red-green color blindness (Protanopia and Deuteranopia) and one subtype of blue-yellow color blindness (Tritanopia) compared to normal vision

2. Blue-yellow color blindness

Here, there’s a problem with your blue cones – which means the eye is unable to distinguish between blue and green, and/or yellow and red shades.

Types of Blue-Yellow Color Blindness

Overall Effects

Trouble differentiating shades of blue and green, as well as between yellow and red and distinguishing dark blue from black.

Disrupts color perception but does not affect visual acuity

2 Subtypes of blue-yellow color blindness


Occurs when the S-cones (short wavelength cones) of the eye are dysfunctional. Causes blue and green to look alike, and red and yellow to look alike.


Occurs when the S-cones of the eye are missing. Causes colors to look less bright and the eye is unable to tell the difference between blue and green, purple and red, and yellow and pink. It also makes colors look less bright.

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.

What is a contrast ratio?

A contrast ratio is the numerical value that describes the relationship between two colors placed on top of one another. The first number, refers to the relative brightness of the light color (eg. white) while the second number refers to the relative brightness of the darker color (eg. black).

According to “In WCAG 2, contrast is a measure of the difference in perceived ‘luminance’ or brightness between two colors (the phrase ‘color contrast’ is never used in WCAG). This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white on white) to 21:1 (e.g., black on a white).”

How to check contrast accessibility

Confused? Here are some tools to help you assess the color contrast accessibility of your design

If you use a Mac, try the Contrast app, which lets you instantly check contrast using a color picker. Or, to get a sense of probable trouble points in your design, try using a Chrome tool called Color Contrast Analyzer. This quickly identifies areas that require work on a screen.

Accessibility text contrast

WCAG has no text contrast requirements for logotypes and incidental text (inactive user interface components, text for decoration, and text that is part of mainly visual content). But that said, for all other text, the same contrast ratios as detailed above should be applied site-wide – whereby the greater the contrast between the focus (text) and background, the better for accessibility.

Accessible color palette combinations

By planning ahead, you can make sure your color palette combinations are accessible, without compromising on design aesthetics.


Or, you can make sure your color combinations are accessible with some free online tools, such as:

Accessible Colour Palette Builder

Contrast Grid


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.

Di Mace

Communication strategist

Di Mace is a freelance copywriter and messaging strategist who's worked with both B2B and B2C brands across the country. She helps businesses identify who their best-fit customers are, what drives them to do what they do, and then crafts messages that turn them from fans into customers and evangelists.

Accessibility Checker logo
Copyright © 2023 Tiny Technologies,
Inc. All rights reserved.
Icons used are from the Noun Project and photos from Unsplash