Web Design, UX/UI
Size does matter. Why 18px isn’t always big enough for WCAG AA compliance.
When it comes to web accessibility, size really does matter, especially for text. One of the most common mistakes people make is thinking that 18px is the same as 18pt. It’s a small difference on paper, but it can have a big impact on how accessible your content actually is.
So what’s the issue?
Under the WCAG (Web Content Accessibility Guidelines), text that’s considered “large” is allowed a lower contrast ratio. That means if your background and text colours don’t have super high contrast, you might still pass as long as the text is big enough.
But here’s the catch: WCAG defines “large” as 18pt, not 18px. And those aren’t the same thing.
Points vs. Pixels
18pt (points) equals 24px (pixels).
So, if you’re using 18px, that’s actually closer to 13.5pt - which doesn’t qualify as “large” text under WCAG.
For bold text, the threshold is a bit lower: 14pt, or around 18.66px.
It’s an easy mistake to make. You read “18,” assume pixels, and move on. But this unit mix-up can mean your text doesn’t meet the contrast standards you think it does.
Why it matters
If your font size isn’t large enough, you need to meet the full contrast requirements:
AA standard: 4.5:1 contrast ratio
AAA standard: 7:1 contrast ratio
These can be tough to hit if your colours are subtle. If your text really is large, 18pt (24px) or more for normal text, or 14pt (about 18.66px) for bold - you can use a lower contrast ratio and still stay compliant.
Quick Fix
Just check your font size and the unit. If you’re using 18px, and it’s not bold, that text is considered regular, not large. If you want it to count as large, bump it up to 24px.
Final thought
This one’s easy to miss, especially if you’re juggling multiple design and dev tasks. But it’s also easy to fix and doing so keeps your content more accessible and inclusive for everyone.
And of course also avoiding any unwelcome fails in those joyful accessibility reports! ; )
