Why Your Font Size Is Failing WCAG—and How to Fix It

Do you know the exact number that decides if your text is readable?

Here it is: 83.9% of home pages fail WCAG 2.1 AA because of low-contrast text, according to the WebAIM Million study (WebAIM Million). That's the single most common accessibility error on the web. If you're reading this, there's a good chance your own site is in that 83.9%. The fix isn't a mystery—it's a set of concrete CSS and design choices you can make today. This tutorial walks you through the exact thresholds, the code, and the design decisions that get you to pass.

What's the real rule for contrast?

WCAG 2.1 Level AA demands a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (WCAG 2.1 (AA)). Large text is typically 18pt (24px) or 14pt (18.66px) bold. But here's the kicker: UI components—buttons, icons, focus indicators—also need at least 3:1 against adjacent colors (WCAG 2.1 (AA)). So your gray placeholder text, your light button background, your subtle focus outline—all of it must meet that bar. If you're using a color like #999 on white, that's roughly 2.8:1—fail. Test with a contrast checker, and don't rely on your eye. About 1 in 12 men have color vision deficiency (NEI), so that red-on-green you think is obvious might be invisible to a significant chunk of your users.

How do you actually implement contrast in CSS?

Start with your text colors. Pick a dark gray like #333 for body text on white—that gives you around 10:1. For secondary text, don't go below #595959 (about 5:1). For large headings, you can relax to #767676 (still around 4:1). But remember, the 3:1 for large text is the floor, not a goal. Now for UI: your primary button should have text that contrasts 4.5:1 with the button background, and the button itself must contrast 3:1 with the page background. A common pattern is a dark blue button (#0056b3) with white text—that's around 8:1 for the text, and the button contrasts with white at about 5:1. Good. But if you use a light gray button (#e0e0e0) with white text, that's a fail on both counts. The fix is to make the button background darker or the text darker. And don't forget focus indicators—they need 3:1 against the element they surround. A thin 1px outline usually fails; use a 2px outline with a color like #0078d4.

What about text resizing and reflow?

Contrast is only half the battle. WCAG 2.1 SC 1.4.4 requires that text can be resized up to 200% without loss of content or functionality (W3C WCAG 2.1 Understanding Resize Text). That means your layout must not break when someone zooms to 200%. And SC 1.4.10 Reflow requires that content works at a width of 320 CSS pixels without horizontal scrolling (W3C WCAG 2.1 Understanding Reflow). So if you have a fixed-width sidebar or a table that's 600px wide, it will fail. The solution is to use fluid grids and flexible images, as MDN Web Docs recommends (MDN Web Docs). Use percentages, fr units, and em/rem for font sizes, not pixels. A good starting point is a body font size of 16px, line-height 1.5, and line-length 45–75 characters, which is a WCAG AA recommendation for readability (WCAG 2.1 (AA)). And for typography, avoid using viewport units alone for font-size because they prevent zooming—use something like font-size: calc(1rem + 0.5vw) instead (MDN Web Docs).

How do you test for these failures?

First, run an automated check with a tool like axe or Lighthouse—they'll catch contrast and alt text issues. But automated tools miss many things, so you need manual checks. Zoom your browser to 200% and see if content overlaps or gets cut off. Resize the window to 320px wide and check for horizontal scrolling. Use your keyboard to tab through the page—can you see where you are? That's WCAG 2.4.7 Focus Visible (W3C WCAG 2.1 Understanding Focus Visible). And make sure the focus isn't hidden by a sticky header or modal—that's WCAG 2.2 SC 2.4.11 Focus Not Obscured (W3C WCAG 2.2 Understanding Focus Not Obscured (Minimum)). The WebAIM Million study found that the six most common errors—low contrast, missing alt text, missing form labels, empty links, empty buttons, and missing document language—account for 96% of all detected errors (WebAIM Million). So if you fix those six, you're way ahead.

What about touch targets and responsiveness?

On mobile, your tap targets need to be at least 44 by 44 pixels, as WCAG 2.1 AA suggests (WCAG 2.1 (AA)). Apple's HIG also says 44x44 points (Apple Human Interface Guidelines), while Android recommends 48x48 dp (Android Developers (accessibility)). WCAG 2.2 SC 2.5.8 sets a minimum of 24x24 CSS pixels, but that's a floor—for real usability, aim for 44. So your nav links, buttons, and form fields should be at least that big. And don't forget that your site must be responsive—Google uses mobile-first indexing, so the mobile version is what gets indexed (Google Search Central). Use a viewport meta tag, fluid grids, and media queries at sensible breakpoints like 375px, 768px, 1024px (MDN Web Docs). And for images, use max-width: 100% and set width/height attributes to avoid layout shift (MDN Web Docs).

What I'd actually do

Here's my blunt advice: stop treating accessibility as a checklist. Instead, bake it into your design tokens. Set a color palette that's tested for contrast—use a tool like Stark or Contrast Checker. Set a base font size of 16px and a line-height of 1.5. Use clamp() for fluid type, but pair it with rem so users can zoom. Build your layout with CSS Grid and flexbox, and test at 320px and 400% zoom. Make every interactive element at least 44px tall. And run a Lighthouse audit on every page—it's free and it will catch the most common issues. The WebAIM Million study shows that 95.9% of home pages have WCAG failures (WebAIM Million), but you don't have to be one of them. Start with contrast, then text resize, then touch targets, and you'll be in the top 4%.

Sources

• MDN Web Docs - https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
• WCAG 2.1 (AA) - https://www.w3.org/WAI/WCAG21/quickref/
• WebAIM Million - https://webaim.org/projects/million/
• W3C WCAG 2.1 Understanding Resize Text - https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html
• W3C WCAG 2.1 Understanding Reflow - https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
• NEI (National Eye Institute) - https://www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/color-blindness