Yesterday, I had a thing or two to say about ease of reading and how to use language that's appropriate for your audience.
Closely related to ease of reading is colour contrast. That's something most don't even pay attention to.
That's because most websites look fine if you've got perfect vision. And if you're sitting at a desk with decent lighting. But things start to degrade real fast in less than perfect conditions. What if you're squinting at your phone in bright sunlight? Or you've forgotten your reading glasses? Or you're one of the millions of people with colour vision deficiencies?
The data from the Web Almanac on colour contrast shows that on about 31% of scanned sites, they couldn't detect anything wrong. This improved by 1% since last year, but the web still has a massive problem. WCAG requires contrast ratios of at least 4.5:1 for standard text and 3:1 for large text to achieve AA conformance.
Think of contrast ratios as a measure of how different your text colour is from its background. Pure black text on a pure white background gives you 21:1. That's the maximum possible. On the other hand, white on white (which is shit), gives you 1:1. And I've seen (and have been guilty of) plenty of instances of light grey on white.
The Almanac also mentions the Accessible Perceptual Contrast Algorithm (APCA). APCA is trying to do better than WCAG's ratios. Instead of a simple mathematical formula, it considers how humans actually perceive contrast. Different colours at the same "ratio" don't always look equally readable to our eyes. APCA tries to account for this.
Is it better? Probably. It's more sophisticated and closer to how vision actually works.
But APCA is still a work in progress and not yet part of current legal standards. We can't rely on it alone for compliance and this creates a gap between "best perceived accessibility" and what regulations require. We also need to take into account practicality and adoption. Since APCA varies requirements by text size, weight and role, it is more complex to apply than WCAG 2's single ratio. This makes automated auditing and retrofitting existing interfaces harder, especially when tools must infer semantics like "body text" versus "decorative text."
So don't worry about it now. Instead, start where you are.
- Use tools like axe-core and Color Contrast Checker to scan your site. These tools will find problems and suggest fixes.
- Test your site in different lighting conditions and on mobile devices.
- Support dark mode and high-contrast preferences that users set in their browsers.
And most importantly, bake contrast checking into your design process from the start. It's much easier than coming back later to fix things.
And before I sign off, tell me if you've heard this before:
But these are our brand colours!
I've certainly heard it. Last week, if memory serves. The team apparently spent months developing that perfect shade of blue and now accessibility requirements are supposedly going to ruin everything.
Keep your brand colours! Just be smart using them. Some of the world's biggest brands, like Google, Apple, the BBC, manage to stay completely on-brand whilst meeting accessibility standards.
If they can do it, so can you.