Why we all need to be using colour contrast checkers

I’m fairly confident (never assume) that I don’t need to explain why websites, apps and all digital tools should be accessible to all; it’s the right thing to do, and it’s the law.

And yet the most basic, easiest-to-fix thing in accessible web and digital design is the one thing designers keep forgetting about over and over and it drives me potty.

Why can’t we all just design with accessible colour contrasts?

McKinsey website: example of failed web accessibility — colour contrast

What is an accessible colour contrast?

By accessible, I mean that the colour you are using and the background it is on should be a colour ratio of 4.5:1¹).

According to W3C colour contrast guidelines under WCAG 2.0 (which has been around since 2008 so we really have no excuse), that’s the difference in colour between text and the background behind the text.

Source: W3C WCAG 2.0 guidelines https://www.w3.org/TR/WCAG20/#perceivable

👋 the rest of this article and all other content from this blog has moved and is now available here.