Our Thoughts

Find out your official contrast rating for web accessibility

An image with copy on top that is obviously hard to read because it's in a similar colour to the image it over the top of
Written By
Published
Categories
Help and advice
Reading Time
1 minute

When thinking about colour and contrast, some very basic fundamentals of design seem to have been lost when we look at some websites. 

We can all guess that black copy on a white background is going to be easy to read, but animated copy over a detailed image would be hard to read. But if we go a layer further and start to look at the colours we’re using, we can find out that a website we assume to be fine can actually cause problems for some people. 

Test your own website

You can use a free online tool that can give you an official rating, called a WCAG (Web Content Accessibility Guidelines) rating.

Here’s how to use it:

  1. Go to this website (this will open a new window) https://webaim.org/resources/contrastchecker/
  2. Enter the RGB code for the font colour, and the RGB code for the background colour into the two boxes. (Your marketing team or designer will have these codes if you don’t know them)
  3. Your rating is displayed instantly further down the page.

If you got AA or AAA ratings:

Congratulations – that’s something worth tweeting about! 

If you failed to meet the standards:

That’s also something to celebrate – because you’ve found something on your website that can be improved easily, and something that will quite obviously make your website easier for everyone to use.

Just by considering the accessibility of your website, you’re thinking in a similar way to the World’s best designers – who design for 100% of people.