Skip to content

Are you making this accessibility mistake on your website?

2022-04-08

A laptop on a desk in front of a white brick wall with a coffee cup next to it, showing the WebAIM colour contrast checker tool.

by Maia Miller

Web accessibility is critical for providing users with a robust, complete and usable web experience. Yet according to an accessibility evaluation of one million homepages conducted by the WebAIM Million Project, 97.4% of homepages had detected accessibility failures!

Is your organisation’s homepage one of those 974,000 inaccessible sites?

According to the WebAIM Million Project, most conformance failures fall into just a few categories. The most common WCAG failure? Low contrast text.

This means that there is not enough contrast between the colour of a given piece of text on a website and its background colour, so people with weak vision can't easily read it. This can impact all types of users, too – when we’re outside looking at our phones in the sun, it’s useful to increase the brightness on our phones because it raises the contrast of what’s on screen. Insufficient contrast can make it difficult or impossible for some users to see text on the screen.

While this is a pervasive problem, it’s not a hard one to solve. There are lots of free and simple tools out there that allow you to test colour contrast. Just search for “colour contrast checker” and pick the one you like best.

Our personal favourite is WebAIM’s colour contrast checker: it tells us which WCAG levels and criteria pass or fail and has a slider feature to allow us to adjust the colour until we’ve reached compliant contrast levels.

The aim is to hit a contrast of at least 3:1 for large text and 4.5:1 for regular text.

Of course, it becomes harder to make changes to colours once a design is finalised, so be sure to consider colour contrast as early as possible in your project.

Go ahead and test the colours of a recent or current project of yours. If it doesn’t pass the colour contrast test, suggest some changes to your team so your homepage can be one of the few on the right side of accessibility!