Colour contrast — time to ditch large font ratio
In almost every new design project, I have to warn designers about the colour combinations they use. And in every one of those cases one of the designers will say “Well, we’re using large fonts, so we can use a 3:1 contrast ratio!”
That sounds fair on the surface. After all, WCAG 1.4.3 does allow for “large text”, or text that’s 18pt or 14pt bold or above or equivalent in CJK (Chinese, Japanese, Korean) alphabets, to have a 3:1 contrast ratio.
Here’s the problem. Some users make their text smaller so they can read it. What happens when you’ve used a colour contrast ratio that’s 3:1 and the font becomes smaller than “large scale”?
You fail to meet WCAG 1.4.3, and thus fail to meet AA standard.
It’s not a designer’s fault
They’re arguing that, since it’s in the standards, they should be allowed to use it. That’s hard to argue against if your company is after hitting WCAG 2.0 AA standard.
Unfortunately we can’t control how our users view a website. Some people do need to make the text smaller, so we risk having text on our site that, at 3:1, become unreadable for many.
We should have one ratio for AA rating
Like other success criteria, 1.4.3 has exceptions. What we in the accessibility community need is to think about what we’re trying to achieve. If users can (and will) change font sizes then we need to come up with a contrast ratio that works as a minimum and stick with it.
What we shouldn’t have are different ratios depending on font sizes. This can lead to confusion (“Well, this works for titles, I’ll use it for tiny text!”), it can lead to unreadable content, and if you pair it with fonts that look larger or smaller than similar fonts you never quite know what “large scale” text is.
To make things easier, let’s do away with the first exception, and say that all text that’s meaningful (i.e., not for decoration or a logotype) has a minimum contrast ratio of 4.5:1. That way we’ll ensure a wider pool of users are able to read our content, regardless of them making the text bigger or smaller.
