1.4.4 Resize Text

Level: AA | Principle: Perceivable | Since: WCAG 2.0 | Automation: Manual

What This Means

Text must be resizable up to 200% of its original size without assistive technology and without losing content or functionality. Users who zoom to 200% should still be able to read all text, access all controls, and use all features. Content must not be clipped, truncated, or obscured, and horizontal scrolling for vertical text (or vertical scrolling for horizontal text) should not be required at 200%.

This criterion applies to browser zoom (Ctrl/Cmd + Plus) and text-only resizing. It does not apply to captions on video or images of text.

Who This Affects

  1. Low-vision users — they routinely zoom to 200% or more to read text
  2. Older adults — age-related vision changes often require larger text
  3. Users with reading disabilities — larger text can improve readability
  4. Users on high-DPI or small screens — they may need to zoom for comfortable reading

Common Pitfalls

1. Viewport meta tag that disables zoom

<!-- Bad: prevents users from zooming on mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- Bad: also prevents zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

2. Fixed-height containers that clip text at larger sizes

/* Bad: text overflows the fixed-height container when zoomed */
.card-description {
  height: 60px;
  overflow: hidden;
}

3. Text in fixed-width containers without wrapping

/* Bad: long text is clipped when font size increases */
.nav-item {
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
}

4. Using px for font sizes with no flexibility

/* Bad: px-based font sizes resist browser text-only zoom in some configurations */
body {
  font-size: 14px;
}
h1 {
  font-size: 24px;
}

5. Overlapping text at 200% zoom

/* Bad: absolutely positioned elements overlap when text grows */
.header-title {
  position: absolute;
  top: 10px;
  left: 20px;
}
.header-nav {
  position: absolute;
  top: 10px;
  right: 20px;
}

How to Fix

Allow zoom in the viewport meta tag

<!-- Good: no maximum-scale or user-scalable restrictions -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Use relative units for font sizes

/* Good: rem-based font sizes scale with user preferences */
body {
  font-size: 1rem;
}
h1 {
  font-size: 2rem;
}
p {
  font-size: 1rem;
  line-height: 1.5;
}

Use flexible containers that grow with content

/* Good: container grows to fit enlarged text */
.card-description {
  min-height: 60px;
  overflow: visible;
}

Allow text to wrap in navigation

/* Good: nav items wrap instead of clipping */
.nav-item {
  min-width: 120px;
  white-space: normal;
  overflow-wrap: break-word;
}

Use responsive layouts instead of absolute positioning

/* Good: flexbox handles resized text gracefully */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

How to Test

  1. View the page source and check the <meta name="viewport"> tag for user-scalable=no or maximum-scale=1, which block user zoom.
  2. Zoom the browser to 200% using Ctrl/Cmd+Plus (press multiple times until the zoom indicator shows 200%).
  3. Scroll through every section of the page and verify all text is readable with no clipping, truncation, or overlapping.
  4. Check that no horizontal scrollbar appears for normal content (data tables are exempt).
  5. Verify all interactive controls (buttons, links, form fields) remain visible and usable at 200% zoom.
  6. Pass: All text is readable and all controls are usable at 200% zoom, with no content clipped or hidden.
  7. Fail: Any text is clipped, overlaps, or becomes unreadable at 200% zoom, or the viewport meta tag blocks user zoom.

axe-core Rules

| Rule | What It Checks | |------|---------------| | meta-viewport | The <meta name="viewport"> element must not set user-scalable=no or maximum-scale less than 2 |

Sources

  1. W3C WCAG 2.2 — Understanding 1.4.4