Accessible Font Sizing: Why rem Matters for WCAG

rem and Web Accessibility (WCAG)

Using rem instead of px for font sizes is not just a best practice — it directly impacts WCAG compliance and the ability of users with disabilities to read your content.

WCAG 1.4.4 — Resize Text (Level AA)

This success criterion requires:

"Text can be resized without assistive technology up to 200 percent without loss of content or functionality."

When you use px for font sizes, users who increase their browser's default font size see no change on your site. The text stays at the exact pixel value you specified. This effectively breaks their ability to resize text.

When you use rem, the text scales proportionally with the user's chosen default font size. A user who sets their browser to 20px default gets 25% larger text on your rem-based site.

How Users Adjust Font Size

There are two common methods:

1. Browser zoom (Ctrl/Cmd + Plus) — Scales everything (text, images, layout). Works with both px and rem.
2. Browser font size setting — Only affects text-related values. Only works with relative units (rem, em, %).

Method 2 is preferred by many low-vision users because it enlarges text without changing the layout or requiring horizontal scrolling. This method only works with rem.

Auditing Your CSS

To check if your site uses accessible font sizing:

1. Open DevTools
2. Search your CSS for font-size:.*px (regex)
3. Each match should be evaluated — is it a font size that should scale?
4. Convert fixed px font sizes to rem

Common Pitfalls

Anti-pattern	Problem	Fix
html { font-size: 10px }	Overrides user preference	Use html { font-size: 62.5% }
body { font-size: 14px }	Text does not scale	Use body { font-size: 0.875rem }
input { font-size: 12px }	Small, non-scaling inputs	Use input { font-size: 0.75rem }
!important on font-size	Prevents user overrides	Remove !important

The Complete Accessibility Chain

For fully accessible font sizing:

1. Set root with % (e.g., 100% or 62.5%) — respects user default
2. Use rem for all font sizes — scales with root
3. Use rem for spacing and layout — content does not overflow
4. Test with browser font size at 16px, 20px, 24px, and 32px
5. Verify no content is clipped or overlapping at each size

Impact Numbers

According to the WebAIM Million report, text-related accessibility issues affect over 80% of websites. Switching from px to rem is one of the highest-impact, lowest-effort changes you can make for accessibility.