Resize text

What it asks

When a user zooms text to 200% — via browser zoom, OS text scaling, or pinch-to-zoom — the page must still work. No clipped text, no overlapping containers, no lost functionality, no horizontal scrolling needed to read sentences. The SC is older than 1.4.10 Reflow, which is stricter; meeting Reflow usually means you meet 1.4.4 automatically.

How to meet it

• Use relative units (rem, em, %) for font sizes and container heights, not fixed pixel values that can’t grow.
• Avoid fixed height declarations on text containers — use min-height if you must.
• Don’t set viewport meta tags that disable user zoom (user-scalable=no or maximum-scale=1).
• Build flexible layouts (flexbox, CSS grid) so containers grow with their content.
• Test at 200% browser zoom on a typical desktop viewport; check that headings, buttons, and form fields don’t overlap.

Common failures

• <meta name="viewport" content="user-scalable=no"> blocking zoom on mobile — also a long-standing 1.4.4 failure.
• Buttons with fixed pixel height that clip the label text at 200% zoom.
• Navigation menus that overflow their container at 200% and become unreachable.
• Modal dialogs sized in pixels that no longer fit their content when zoomed.
• Form labels that wrap into the next field’s area when text grows.

Why it matters

People with low vision routinely use 150-200% zoom as a daily setting. Failing 1.4.4 means those users either can’t read the page or have to scroll horizontally on every line — both of which they will abandon. Fixing it usually means moving from px to rem across the design tokens, which is a one-time refactor.