WCAG 1.4.4 (Resize Text) — Programmatically detect container collisions, content clipping, and viewport overruns when users have non-default browser font sizes. Load any page below and drag the slider — the preview scales live and detection runs automatically.
Load a page above, choose a font scale, and click Scan or Full Audit to detect issues.
This tool simulates what happens when a user changes their browser's default font size (Chrome → Settings → Appearance → Font Size). It modifies the root font-size percentage, which changes the computed value of rem and em units while leaving px values fixed. This reveals where fixed-size containers collide with scaled text.
| Check | Method | What it catches |
|---|---|---|
| Horizontal overflow | scrollWidth > clientWidth | Text wider than its container |
| Vertical overflow | scrollHeight > clientHeight | Text taller than its container |
| Content clipped | overflow:hidden + scroll mismatch | Text hidden with no scrollbar — user loses content |
| Viewport overrun | getBoundingClientRect() vs clientWidth | Elements pushed off-screen |
| Input overflow | Canvas measureText() vs input padding | Text invisible inside form fields |
| Fractional borders | borderWidth < 1px | Sub-pixel borders that may blur |
| Sibling overlap | Bounding rect intersection | Scaled elements colliding with neighbors |
