WCAG 1.4.4 — Resize Text

What this requires

Text — except for captions and images of text — must be resizable up to 200% without loss of content or functionality, and without the user needing assistive technology. In practice this means the layout has to flex, the text has to scale (no fixed pixel font sizes locking the user out), and no part of the UI is allowed to clip, overflow unrecoverably, or stop working at the larger size.

How AI coding tools fail this

When asked for a pixel-perfect layout from a Figma file, AI tools faithfully reproduce hard-coded heights, fixed-pixel font sizes, and absolute positioning. At 100% the layout is identical to the design. At 200% buttons truncate, text gets cut off by overflow: hidden containers, and modal headers disappear.

The second pattern: setting font-size in pixels (font-size: 14px) instead of rem or with relative units. Browser zoom usually still scales pixel fonts, but user-set "minimum font size" in browser preferences doesn't take effect on pixel fonts, so users who rely on that setting are stuck.

The third: fixed-height containers (h-12 for a button row) that clip content as it grows. The button gets taller; the container doesn't.

Failing examples

A button with a fixed pixel height and overflow: hidden:

<button style={{ fontSize: "14px", height: "32px", overflow: "hidden" }}>
  Continue to checkout
</button>

A modal with a fixed-height header that hides the title at 200%:

<div className="h-12 overflow-hidden">
  <h2>Confirm your order</h2>
</div>

Passing examples

Use relative units and let the container grow with the content:

<button className="rounded-md bg-primary px-4 py-2 text-base">
  Continue to checkout
</button>

Modal header that scales with text:

<div className="px-6 py-4">
  <h2 className="text-lg font-semibold">Confirm your order</h2>
</div>

Edge cases

Browser zoom and text-only zoom are different. Browser zoom scales everything; text-only zoom (Firefox option) scales only text. Both must work.
rem and em are the safe defaults. px works for browser zoom but breaks user "minimum font size" preferences in some browsers.
Reflow (1.4.10) is the related Level AA requirement for 320 CSS-pixel width. 1.4.4 is about text size; 1.4.10 is about viewport width.
Captions and images of text are explicit exceptions: captions are styled by the platform; images of text are exempt from resizing.
Two-finger pinch zoom on touch devices counts as a resize mechanism. Don't disable it with user-scalable=no.

How Jeikin handles this

This requires runtime rendering. Jeikin's guided review for 1.4.4 takes screenshots of pages at 100% and 200% zoom and flags differences in cropped or hidden content. The dashboard captures the visual evidence per page. The simpler scanner catches pixel-fixed font sizes in component CSS as a leading indicator.