Why Colour Matters for Creating an Accessible Browsing Experience

by Andy Carter

16/02/2026 4 min read

Colour chart consisting of 19 columns showing different shades of colour from green to blue

Colour is powerful. It stirs emotion, conveys meaning and helps define the identity of brands. However, we don’t all see colour the same.

As we age, colours lose vibrancy; lighting can alter the contrast between shades; and for many, some colours cannot be perceived at all. It’s essential we consider these differences when designing for the Web and creating content. Colour isn’t just about aesthetics, it’s about accessibility.

Colour contrast

Poor colour contrast between text and its background is one of the most common accessibility issues online. WebAIM annually assess the top one million websites worldwide for accessibility issues. Last year, they found that 79.1% of homepages had low contrast text.

Colour contrast is the measure of brightness between two colours. This ranges from 1:1 (comparing the same colour against itself) to 21:1 (comparing black against white).

Side-by-side photos of dogs in snow. One depicts a black dog, the other a white dog. — It’s a lot easier to spot a black dog in snow than a white dog.

For guidance on what is an accessible and readable ratio we can look at the Web Content Accessibility Guidelines (WCAG):

For regular text, the colour contrast needs to be at least a 4.5:1 ratio
For larger text, the ratio needs to be at least 3:1

There are lots of excellent free online tools for checking the contrast between two colours. WebAim’s Contrast Checker is one good example.

Good colour contrast ensures those living with low vision and mild visual impairments can still comfortably read the text. Contrast sensitivity loss can be caused by various eye diseases, including cataracts, glaucoma and diabetic retinopathy. Additionally, as our eyes age, our sensitivity to colour contrast reduces. According to the RNIB, 1 in 5 people in the UK will live with sight loss in their lifetime.

Side by side examples of good and poor text contrast against a white background — Our choice of text colour can significantly impact readability.

Given that almost 4 in 5 homepages have low contrast text, this is something we really need to improve on. Regardless of how informative and engaging your content is, if people struggle to read it, most will just give up.

Colour blindness

Colour vision deficiencies (CVD) affect around 300 million people worldwide. These are more commonly known as colour blindness.

‘Colour blindness’ is a bit of a misnomer. Most people with a CVD can see colours, but will not see the same distinctions between colours that others can see. There are many variants and severities of CVD affecting perception across the colour spectrum.

The most common CVD is red-green colour blindness.

Assorted red and green apples with a red-green colour deficiency filter applied to half of them causing the apples to be difficult to distinguish. — Our ability to see colour can affect how some people see the world. The apples on the left represent normal colour vision, the ones on the right represent how someone with a red-green colour deficiency may see them.

Approximately 1 in 12 men, and 1 in 200 women have a CVD. Despite its prevalence in society, it is often overlooked when thinking about web design and content.

In the introduction, I mentioned that colour can be used to convey meaning. Green and red are common examples: green often indicates success, approval or safety, while red is frequently used to highlight errors, warnings or danger.

If we rely solely on these colours it can be problematic. More than 99% of people with CVD struggle to distinguish between red and green. This means important cues could get missed.

Three packets of different flavoured crisps with their labelling and colour removed. — Crisp packets use familiar colours to represent flavours, if the labelling is removed you become reliant on these colours. Take those away and it becomes very difficult to know what flavour you’re picking.

To ensure good accessibility, we must avoid only using colour to convey information, indicate an action or prompt a response. In these cases, colour needs pairing with other indicators like icons or text labels.

Comparison of two states of a toggle switch that relies on colour to indicate their status with one set of toggles representative of how they’d appear with a red-green colour deficiency. — Without labels, these toggles rely solely on colour to communicate their function. When viewed with a Colour Vision Deficiency, that meaning is lost.

Comparison of two states of a toggle switch that use colour and labelling to indicate their status with one set of toggles representative of how they’d appear with a red-green colour deficiency. — If we add labels to the toggles, their purpose is much clearer and can be used regardless of someone’s ability to see colour.

Colour matters

The conditions that impact our ability to perceive and distinguish between colours can often be invisible to others and are often misunderstood. As a result, many people don’t realise how common or impactful they are.

When the contrast between two colours is low, many people will be unable to comfortably perceive the difference, if at all. As a result content can become difficult to read, or invisible.

When we rely solely on colour to convey meaning, many people will be unable to understand what is in front of them.

If you want to retain and grow your customer base, the accessibility of your content is essential. That means taking into account those that have reduced vision or colour blindness.

At Evoluted, we know that colour is important to your brand and the users that will interact with your website. We take care to ensure good colour contrast is used throughout designs; and we consider those who perceive colour differently to others. If you want to understand how your website is currently performing when it comes to colour and overall accessibility, contact us today to learn more about our Accessibility Audit Services.