Resize Text – Mock Page

This page intentionally mixes PASS and FAIL examples for WCAG 1.4.4 testing at 200% zoom.

PASS: Regular scalable text

This paragraph uses relative fonts and no transforms. It should visibly increase in size when you zoom the page to 200%. Headings, paragraphs, links, and buttons in this section are expected to scale.

A normal link

FAIL A: Counter‑zoom via CSS transform

Expected behavior at 200% zoom: text appears roughly the same size as at 100%.

Counter‑zoomed heading

This block is wrapped in transform: scale(0.5) withtransform-origin: top left. When you zoom the page to 200%, the browser doubles everything, but this element permanently halves itself, resulting in text that appears to not scale.

A/B Comparison: Scales vs Counter-zoom

At 200% page zoom, the left block should look ~2× bigger; the right block should look ~the same as at 100% (because it permanently halves itself).

Control (scales)

Aa Bb Cc 123

This is normal text. It should look roughly twice as large at 200% compared to 100%.

Counter-zoom (should NOT look 2×)

Aa Bb Cc 123

This text is inside transform: scale(0.5). At 200% page zoom it should look ~the same size as at 100%.

Approx. page zoom:100%

FAIL B: Fixed‑pixel container causing clipping

Expected behavior at 200% zoom: content becomes clipped, hiding part of the text.

This paragraph sits in a narrow, fixed‑width container with tight line‑height. At 200% zoom, the text grows but the box does not, so lines are clipped or require horizontal scrolling. This illustrates layout issues often seen alongside non‑resizing text bugs.

FAIL C: Non‑standard zoom: 0.5 (Chromium only)

Expected behavior at 200% zoom in Chromium: text appears about the same size as at 100%.

This block uses the non‑standard zoom property. In Chromium, zoom: 0.5 counteracts page zoom similarly to a transform, making the text appear not to scale at 200%.

A link inside a zoomed block

QA Helper

  1. Set browser window to 1366×768 at 100% zoom. Capture a full‑page screenshot.
  2. Increase to 200% zoom (Ctrl/Cmd +). Capture another screenshot in the same viewport.
  3. Record elements that do not visibly scale (FAIL A & C).
  4. Note any clipping or layout breakages (FAIL B).