How to check colour contrast on your website

Colour contrast affects how easy your website is to read. In the video below, I show you how to check it using your browser’s built-in tools, and how to tell whether your colours meet accessibility guidelines.

If something passes AA, that’s absolutely fine. AAA is great, but not essential.

What you’re looking for (and what it all means)

Colour contrast is one of those accessibility topics that sounds simple, but can feel a bit intimidating once you start looking into it.

The good news is: you don’t need to memorise guidelines or understand loads of technical jargon. You just need to know what to look for and what “good enough” actually means.

In the video above, I show how to use your browser’s built-in tools to check colour contrast on your website. Below is a plain-English explanation of what you’re seeing and how to interpret it.

What do I mean by colour contrast?

Colour contrast is the difference between:

• the text colour

• and the background colour behind it

If there isn’t enough contrast, text can be difficult or impossible to read — especially for people with low vision, colour blindness, or eye strain.

This applies to:

• body text

• headings

• buttons

• links

Using Inspect Element to check contrast

Most modern browsers (including Chrome, Edge and Firefox) have accessibility tools built in — no extra software needed.

In the video, I show how to:

1. Right-click on text on your website

2. Choose Inspect

3. Click on the colour swatch next to the text colour

4. View the contrast information provided by the browser

Once you’ve opened the colour panel, you’ll see information about whether the contrast passes or fails accessibility guidelines.

This is where AA and AAA come in.

What do AA and AAA actually mean?

You’ll usually see contrast checked against two standards:

AA – the minimum standard

• This is the widely accepted baseline for web accessibility

• It’s what most accessible websites aim for

• If your text passes AA, that’s good and absolutely fine

If you’re checking your site and seeing “AA: Pass”, you can be reassured that your contrast is acceptable.

AAA – the higher standard

• AAA is a stricter level of contrast

• It’s great if you can meet it

• But it’s not essential for most small business websites

Many perfectly accessible websites don’t meet AAA everywhere – especially when brand colours are involved.

If something fails AAA but passes AA, that’s usually not a problem.

What should you aim for?

If you’re unsure, this is a good rule of thumb:

• ✅ Passes AA → you’re doing well

• ⭐ Passes AAA → excellent, but optional

• ❌ Fails AA → worth adjusting if you can

Accessibility isn’t about perfection — it’s about making sure people can comfortably use your website.

What to do if something doesn’t pass

If you find text that fails AA:

• Try darkening the text colour slightly

• Or lightening the background colour

• Small changes often make a big difference

A quick reassurance

Colour contrast is a bit techie — which is why using built-in tools and clear pass/fail indicators is so helpful. You don’t need to understand the maths behind it to make good decisions.

Simply use the tools I’ve shown you in the video to help you make choices that mean more people can read and use your website comfortably.

Help that goes beyond the basics

If you have one of our websites, our unlimited free help isn’t just for simple updates like adding text or swapping images.

It also covers the trickier, behind-the-scenes things that help your website work better.

These are the details that often get overlooked, but they’re what take a website from looking fine to working really well.

So if you have one of our websites and you’ve checked your colours and aren’t sure what to change — or you’d like a second pair of eyes — just get in touch and we’ll help you work it out.

(And if you’re curious about what we offer with our websites, you can find out more about our Website Blends here.)