What does it mean to be colour blind?
Colour vision deficiency, more commonly known as colour blindness, causes difficulty identifying and distinguishing between certain colours. This is usually genetic and is present from birth. However, it can appear later in life due to other health conditions, medication side effects, or exposure to certain chemicals. Many people also find it difficult to distinguish between colours as they get older.
Types of colour blindness
There are seven official types of colour blindness, which are as follows:
Red-green colour blindness
- Protanopia, also known as red-blind, these users can’t see the colour red.
- Protanomaly, also known as red-weak, these users can see some shades of red, but not all.
- Deuteranopia, also known as green-blind, these users can’t see the colour green.
- Deuteranomaly, also known as green-weak, these users can’t see some shades of green.
Blue-yellow colour blindness
- Tritanopia, also known as blue-blind, these users can’t see the colour blue.
- Tritanomaly, also known as blue-weak, these users can’t see some shades of blue.
Complete loss of colour
- Achromatopsia, also known as monochromacy, these users can’t see any colour at all. They see only shades of black and white.
When I asked a colour blind friend of mine what their main annoyance is about being colour blind was, their response was instant – ‘People think I can’t see colours! I can; I just struggle to tell which colour is which for certain colours’. I recently bought this friend a t-shirt in a really lovely lilac shade that I knew would suit them. They looked at it and said, ‘Teal is an awesome colour!’.
A few months ago, I worked on an ice-themed game, with blue and purple as our main colours. When my friend tried to play the game, they kept dying, insisting that they couldn’t see the health bar. When I questioned them about it, it turned out their colour blindness was causing them to see blue and purple as the same colour – they literally couldn’t discern that the health bar was going down!
What is colour contrast?
We can’t assume that all colours are discernable to all users, as evidenced by our colour blind users, which is why colour contrast is such an important thing. Colour contrast refers to how different the colour of two adjacent elements is. In scientific terms, it’s a ratio of the brightest colour’s luminance to the darkest colour that can be used. Colour contrast ratios range from 1:1 (the same colour) to 21:1 (the biggest variation that can be produced). The lower the contrast, the more difficult it is for some users to differentiate between the colours.
If you were to use black text on a black background, you wouldn’t be able to see the text at all, as it’s the same colour as the background. This would be a contrast ratio of 1:1 – namely, they’re the same colour, so there is no difference between the two. On the other side of this, white text on a black background (or vice versa) is as contrasting as you can get. This gives you a contrast ratio of 21:1, as this is the largest contrast that can be produced on the web.
An explanation of the Web Content Accessibility Guidelines
The Web Content Accessibility Guidelines (WCAG) have two acceptable colour contrast levels – AA and AAA. This refers to the colour contrast between background and text colours (or images of text colour). Any purely decorational text does not have to conform to the colour contrast guidelines. When large text is referred to, this means text with a font size of at least 18 points, or at least 14 points for bold text.
AA
AA level is the minimum required for a basic accessible site, which requires a colour contrast of at least 4.5:1 for background and foreground colours for regular-sized text and contrast of 3:1 for large text.
AAA
AAA level provides contrast for a fully accessible website, requiring a colour contrast of 7:1 for normal text and 4.5:1 for large text.
A colour contrast of 4.5:1 means that your foreground colour text must be at least 4.5 times darker or lighter than the background colour.
Formula
Colour contrast is calculated using the following formula:
(L1 + 0.05) / (L2 + 0.05)
In this formula, L1 refers to the relative luminance of the lighter of the two colours, and L2 refers to the relative luminance of the darker of the two colours. If you’d like to look more into what’ relative luminance’ is, WCAG has a full explanation here (although it’s quite maths-heavy).
Most websites will aim to conform to AA standards with colour contrast, mainly due to the impact on design. If you’re designing a website to AAA standards, it limits your colour options, which can have a negative impact on design. That’s not to say that you shouldn’t aim for it, but as long as you’re conforming to a minimum of AA standards with colour contrast, most of your colour blind users will be able to view and use your site.
Examples of colour contrast
The contrast checker used in this article can be found at https://colourcontrast.cc/, which we’ll walk through how to read now, using the example below.
The `Aa` in the top left shows you how your text would look with the text and background colours you’ve chosen. To the right of this is the colour contrast – in this case, it’s giving a contrast ratio of 19.56:1.
Over to the right, you can see whether your chosen colour combination passes or fails the WCAG AA and AAA level guidelines for colour contrast. The four options are based on the differences. For instance, this colour combination would pass AA level for large text, AAA level for large text, AA level for normal-sized text, and AAA level for normal-sized text.
Underneath that is where you can select your colours. The background colour is the colour you want to be behind your text, and foreground colour refers to your text colour (although you can also use this to check the contrast for other things, which I should have done for the health bar in the aforementioned ice-themed game).
Below that, you have some sliders to control your colours. This is a really easy way of finding a colour combination with good contrast. For example, if you enter your desired colours, and the contrast is 4.4:1 rather than 4.5:1, this would fail the AA level colour contrast guidelines from WCAG. The sliders mean that you can adjust tiny bits of each colour until you reach a colour combination that works with your web page designs and is also accessible.
Extremes of colour contrast
First, let’s start by showing you the extremes of colour contrast. For example, here’s a colour contrast of 1:1 – black text on a black background. Notice how you can’t see the ‘Aa’ at the top left in this example. While I doubt anyone would actually select to use the same text colour and background colour on their website, it’s good to look at the extremes.
Here’s the other end of the spectrum, two examples with a colour contrast of 21:1, white text on a black background and black text on a white background. Here you can see in the top right that this colour contrast passes all 4 levels of WCAG colour contrast.
An example of colour contrast that doesn’t meet the WCAG AA level is a text colour of #2d8b6d against a background colour of #97d676. A contrast ratio of 2.43:1 fails all four of the WCAG checks and wouldn’t be a good accessible option for colours to use on your site.
An example of AA level colour contrast would be a text colour of #8b2d78 against a background colour of #76d6d5. Here you can see that it’s passing the first three levels but failing the contrast requirement for AAA level normal-sized text. This is a good colour combination to choose, but there is still room for improvement.
A colour contrast of 7:1 for AAA level means that your foreground colour text must be at least seven times darker or lighter than the background colour. An example of this would be a text colour of #88bf9e against a background colour of #372323. Here you can see that this colour combination passes all four options of WCAG colour contrast levels and would be a good choice for your site.
Bear in mind that these are just examples – you don’t have to use these specific colours, but it’s worth considering the colour contrast when you’re selecting which colours to use on your website.
Here are a few good sites where you can check your colour contrast:
- https://colourcontrast.cc/
- https://webaim.org/resources/contrastchecker/
- https://accessibleweb.com/color-contrast-checker/
- https://coolors.co/contrast-checker/112a46-acc8e5
- https://contrastchecker.com/
Abigail Harrison, Code Institute Student
A11y Accessibility Series
This article was written by Abigail Harrison, a Code Institute student. This is part of a series of articles on the subject of A11y, where Abigail covers the following topics.
Try our Free 5 Day Coding Challenge 
Take our full stack course 
