Text elements must have sufficient colour contrast against the background

All text elements must have sufficient contrast between text in the foreground and background colours behind it in accordance with WCAG 2 AA contrast ratio thresholds.

Google has provided us with an automated tool for improving the quality of our web pages, in the Chrome DevTools, with Lighthouse. This tool is immensely useful when developing any website. Why? To answer that, launch your website locally or visit any website and in your Chrome browser, open up the Chrome DevTools and under "Audits", select Desktop or Mobile then hit "Run". We don't want to see any red circles or if we do, Google has provided us with a resolution for any issues found. A typical issue we are going to talk about is:

Text elements must have sufficient colour contrast against the background

We as developers and/or designers forget about other people's limitations when it comes to the browser. We also forget that there is a very popular device called Screen Reader. We even forget our blind audiences. So does a blind person uses the internet? Yes!

In short, a lot, but only rough estimates exist. If you include folks with low-vision that require some form of aid such as screen magnification, the number gets even bigger. Something like 7.3 million Americans have a reported visual disability with more than half of those being under the age of 65...
Source: Quora.

A staggering number to comprehend; out of the 7.3 million, how many actually visits our website? It's hard to tell but we must build our websites suited for anyone with low-vision.

Before we design, one should already be thinking about such individuals with blindness or low-vision. We design by the guidelines of WCAG.

As I designed this website, MayneWeb, I fell in love with a specific blue colour 027BDE. It was the only blue colour I pretty much used everywhere. Sadly it cannot be used on backgrounds where the foreground colour is white. Lighthouse complained about this, in the Audits, and provided a solution. The solution was understandable but I could not implement it. Basically I needed to darken my background so that the text is more visible. Darkened the background, while it's still blue, it was still failing. Doing a simple Google search "WCAG 2 AA contrast ratio", has led me to the marvellous website: WebAim. I tweaked my original blue colour until all WCAGs were passed. With this website in mind, I'm sure never to have an issue in my Audits results ever again.

Written byDaveyon MayneAn aspiring 'overstack' developer 🤓 that tries to be perfect in the areas he love.Say hi via email or on Twitter