Perceivable · 1.4 Distinguishable

Resize Text WCAG 1.4.4 · Level AA

Except for captions and images of text, text must be resizable to 200 percent without assistive technology and without losing content or functionality, such as clipped or overlapping text or unusable controls.

Level
AA
Since
WCAG 2.0
Principle
Perceivable
Guideline
1.4 Distinguishable
Try the live demo Open the URL Analyzer Checklist

Live demo

Enlarge the text to 200%

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Raise the text size from 100% to 200%. Check whether the whole flight message and the button label stay visible.

Live example

Passes

Your flight to Lisbon

Flight TP 1351 leaves at 08:15 from gate 12. Boarding closes 30 minutes before departure.

Choose your seat

What happened

    Why it passes

    The card and the button are sized in em, so they grow with the text. At 200% every word is still there.

    Why it fails

    The card and the button have fixed sizes in pixels and hide what does not fit. As the text grows, the boarding details and the end of the button label are cut off.

    Examples

    Code that fails, and the fix

    Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes 2 lines

    Fails

    Fixed pixel height clips enlarged text

    Live preview

    CSS
    .promo {  height: 48px;  overflow: hidden;  font-size: 1rem;}

    When the text is enlarged to 200%, the box stays 48px tall and hides the lines that no longer fit. W3C lists this as failure F69.

    Passes

    Height that grows with the text

    Live preview

    CSS
    .promo {  min-height: 3em;  padding: 0.75em 1em;  font-size: 1rem;}

    A minimum height in em scales with the text, and the box can grow, so enlarged text wraps onto new lines instead of being cut off (technique C28).

    02What changes − 4vw + 2rem

    Fails

    Heading sized only in viewport units

    Live preview

    CSS
    .article-title {  font-size: 4vw;}

    Zooming in makes the viewport narrower in CSS pixels, so text sized only in vw does not get bigger. W3C lists this as failure F94.

    Passes

    Heading sized in rem

    Live preview

    CSS
    .article-title {  font-size: 2rem;}

    rem follows the browser's text size setting and zoom, so the heading reaches 200% along with the rest of the page.

    Fails

    Viewport meta tag that blocks zoom

    Live preview

    HTML
    <meta name="viewport"      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    This tells mobile browsers not to let people pinch to zoom. Remove maximum-scale and user-scalable so text can be enlarged to 200%.

    Why it matters

    Who it helps

    People with low vision who enlarge text with browser zoom or text-size settings can still read everything and use every control.

    W3C: Understanding 1.4.4

    • Level AA

      Level AA is the level most laws and policies require.

    • In WCAG versions

      Part of WCAG 2.0 since December 2008, and of every version after it.

      WCAG 1.0 checkpoints: 3.4

    • Where it is required

      Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Zoom the browser to 200 percent and check that all text grows and nothing is clipped, overlapped or hidden.
    2. In a browser with text-only zoom, such as Firefox, enlarge text to 200 percent and repeat the check.
    3. On mobile, confirm the viewport meta tag does not block pinch zoom with user-scalable=no or a maximum-scale below 2.

    Common failures

    Where it breaks

    • Text inside fixed-height boxes is clipped or overlaps other content when enlarged.
    • Font sizes set only in viewport units do not grow when the user zooms.
    • A viewport meta tag with user-scalable=no or maximum-scale=1 blocks zoom on mobile.

    On the Accessibility Checklist

    Related