How did you choose the colours for your last website update? Did you choose colours based on your brand logo and text or did you use the Web Content Accessibility Guidelines (WCAG) algorithm? But can the WCAG algorithm guarantee good legible colour contrasts for websites? Research by The University of Cambridge says it doesn’t. So they have developed an alternative algorithm for good colour contrast for websites.
Since January 2022, the Accessible Perceptual Contrast Algorithm proposes that legibility of text on websites is better with perceived difference than a mathematical contrast ratio. White text on strong coloured backgrounds are preferred over black text in almost all cases in the study.
In the examples above, the black text passes the WCAG contrast ratio but fails the white text. The Accessible Perceptual Contrast Algorithm passes the white text and fails the black text.
Sam Waller explains this more fully in his article, Does the contrast ratio actually predict the legibility of website text?
As a result of this work, an early working draft of WCAG 3 proposes using the new method for calculating contrast.
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. This information is also important for product labelling especially for online shopping.