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
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.
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).
TABLE OF CONTENTS
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.
People who are colorblind, may have trouble seeing the:
Here’s two possible scenarios where these issues would play out:
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.
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.
Because your red, green and blue cones can malfunction separately, there are multiple subtypes within each main type of 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.
Trouble distinguishing between some shades of red, yellow, and green.
Disrupts color perception but does not affect visual acuity.
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.
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.
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
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.
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:
The minimum required contrast ratio (for text on a solid color background) is:
However, WCAG also recommends striving for an enhanced contrast ratio:
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.
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 webaim.org “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).”
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.
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.
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:
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:
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 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.