WCAG 1.4.4 (Resize Text) — Users must be able to scale text to 200% without loss of content or functionality. These demos show how fixed px containers collide with scaled text, and how rem-based containers handle it gracefully.
Top row: fixed 120px × 40px buttons with rem-based text. Bottom row: rem-based min-width buttons. Scale to see which break.
Top: 600px fixed-width nav. Bottom: 37.5rem nav. Watch link labels get clipped when text scales up.
Top: 200px-wide cards with 80px fixed body height. Bottom: rem-based cards that grow with content.
Real-time dashboard metrics and config
Real-time dashboard metrics and config
Real-time dashboard metrics and config
Left: 160px wide, 36px tall inputs. Right: 10rem wide, min-height 2.25rem inputs.
Red tags: 80px × 28px fixed. Green tags: rem-based with padding.
Top: 600px wrapper with overflow:hidden (clips content). Bottom: 37.5rem wrapper with overflow:auto (scrollable).
| ID | Product Name | Category | Price | Status |
|---|---|---|---|---|
| 001 | Wireless Headphones | Electronics | $149.99 | In Stock |
| 002 | Ergonomic Keyboard | Peripherals | $89.50 | Low Stock |
| 003 | USB-C Charging Cable | Accessories | $24.99 | In Stock |
Sub-pixel border widths can render blurry or dither to lower contrast on some displays. Left box uses 0.5px borders, right uses whole 1px.
