Level AA

Fixed pixel font sizes and fixed-height containers clip or hide text when users scale to 200%

1.4.4 Resize Text

In Plain Language

[1.4.4 Resize Text](https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html) (Level AA) requires that text can be scaled up to 200% without loss of content or functionality, using only the mechanisms already built into mainstream browsers -- page zoom or text-only resize -- with no assistive technology in the loop[1]. Captions and images of text are explicitly out of scope.

The criterion covers browser-rendered text (HTML text styled with CSS), not text rasterized into images. When a user doubles text size, layouts must reflow so every string remains readable and every control remains operable. Fixed pixel font sizes combined with fixed pixel widths or heights are the usual failure mode: text clips, overflows, or collides with adjacent elements.

Why It Matters

  • Low-vision users who do not run a screen magnifier rely on browser zoom and text-size adjustment as their primary reading accommodation. It keeps the whole page in view and does not require extra software.
  • Older readers use the same browser controls to compensate for presbyopia and age-related contrast loss. They are unlikely to install assistive technology to read a single page, so the default zoom path has to work.
  • When a container is sized in `px` with a fixed `height` and `overflow: hidden`, enlarged text is silently clipped -- form labels, inline errors, and navigation links disappear without any visual warning that content is missing.
  • 1.4.4 is Level AA, which means it is in scope for Section 508, EN 301 549 (which references WCAG), and essentially every organizational accessibility policy that targets WCAG AA conformance[2].
  • 1.4.4 is distinct from [1.4.10 Reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html) and [1.4.12 Text Spacing](https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html): 1.4.4 tests browser text scaling to 200%, 1.4.10 tests a 320 CSS px viewport with no 2D scrolling, and 1.4.12 tests user-applied spacing tokens (line height, paragraph, letter, word). A page can pass one and fail another -- treat them as separate checks.

Examples

Do: Flexible containers that grow with text

Account Settings

Update your email address, password, and notification preferences from this page.

✔ Container uses padding and grows with text -- no overflow or clipping at 200%.

.card {
  padding: 1rem;
  max-width: 300px;
  /* No fixed height -- container grows with content */
}
.card p {
  font-size: 0.875rem;
  line-height: 1.5;
  /* Relative units allow browser text resize */
}
Don't: Fixed-height container that clips text

Account Settings

Update your email address, password, and notification preferences from this page.

✘ Fixed height with overflow:hidden -- text is clipped and unreadable at larger sizes.

/* FAILS: fixed height clips enlarged text */
.card {
  height: 60px;
  overflow: hidden;
}
/* At 200% text size, content is cut off
   and users cannot read the full text */
Do: Navigation that wraps gracefully

✔ flex-wrap lets navigation items reflow to a new line when text is enlarged.

Don't: Overlapping text from fixed positioning
Username:john_doe_123

✘ Absolute positioning with fixed left offsets -- text overlaps when enlarged.

How to Fix It

  1. Size text in relative units. Use `rem` for the base scale, `em` for sizes that should track their parent, and `%` where it reads more naturally. Avoid `font-size` in `px` on body copy -- pixel values still scale under page zoom, but they defeat text-only resize in browsers that offer it.
  2. Do not pin heights on text containers. Replace fixed `height` with `min-height` so the box can grow as its contents enlarge. The same rule applies to buttons, badges, table cells, and modal dialogs that carry text.
  3. Do not wrap text regions in `overflow: hidden`. If a region genuinely needs to be bounded, use `overflow: auto` so a scrollbar appears when content exceeds the box -- clipped content is invisible, scrollable content is merely inconvenient.
  4. Lay out with flexbox or grid and allow wrapping. `display: flex; flex-wrap: wrap` on navigation bars and toolbars lets items drop to a new line at larger sizes. `grid-template-columns: repeat(auto-fit, minmax(...))` does the same for card layouts.
  5. Verify at 200% browser zoom. In Chrome, Edge, and Firefox, press `Ctrl`/`Cmd` and `+` until the zoom indicator reads 200%. Walk every primary flow -- navigation, forms, error states, modals -- and confirm no text is clipped, no controls are cut off, and no content requires horizontal scrolling beyond what 1.4.10 Reflow already permits.

References

  1. [1] W3C (2023). Understanding Success Criterion 1.4.4: Resize Text. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html ↩
  2. [2] W3C (2023). Web Content Accessibility Guidelines (WCAG) 2.2. W3C, Accessed 2026-04-07. https://www.w3.org/TR/WCAG22/ ↩