Good colour contrast for websites

How did you choose the colours for your last website update? Did you choose colours based on your brand logo and text or use the Web Content Accessibility Guidelines (WCAG) algorithm? But can an algorithm guarantee good colour contrasts on digital screens? Probably not. Visual perception is personal and much depends on your eyesight. Maybe it means using humans and not algorithms. But we need some form of standard to guide colour contrast when designing web and app pages. The WCAG contrast formula has tried to do that. However, Sam Waller reports there are some deficiencies with it. 

In January 2022, the Advanced Perceptual Contrast Algorithm now proposes a more complex formula. The technical talk is that the legibility of text on websites is better with perceived difference than a mathematical contrast ratio. Sam Waller explains this more fully in his  article, Does the contrast ratio actually predict the legibility of website text?

This is important information for choosing brand logos and text so it isn’t just something web designers should know. Many website designs are guided by brand colours so choose carefully.  

The article has examples of greyscale and colour contrasts and you can decide which work best for you. It’s best to narrow the screen for the coloured examples to limit the number visible at one time. 

 

Four of the colours against a white background showing levels of colour contrast..
Screenshot from article

 

The Web Content Accessibility Guidelines (WCAG) have guided the whole ICT industry in access compliance. Billions of dollars in digital design are based on these guidelines. It’s formed the basis of ICT procurement around the world. Waller says to check out the examples in his article and give feedback via his LinkedIn article. The screenshots shown are just a sample from his article. 

Four of the colours against a black background.
Screenshot from article

A previous post also shows how colour combinations make a big difference in contrast and legibility. There also information on colour vision deficiency which Waller also mentions at the end of his article. 

 

Accessibility Toolbar