The issue

WCAG success criterion 1.4.4 requires that text remains readable and functional when the user increases the character size up to at least 200%. Visually impaired people frequently use browser zoom or their operating system's text size settings to enlarge content. If the site is not designed to support this enlargement, text may overlap other elements, be truncated by fixed-size containers, or overflow outside the visible area. The most frequent causes of this problem are using fixed pixel heights on text containers (height: 200px with overflow: hidden), font sizes in absolute units (px) instead of relative units (rem, em), and rigid layouts that do not adapt to content enlargement. A container with a fixed height and overflow: hidden will simply cut off text that exceeds the container when font size increases. The user sees the beginning of the paragraph but the rest is invisible and inaccessible. Navigation menus are often the first elements to break at zoom. A horizontal menu with fixed-width items sees its text overlap or get cut when font size increases. Table headers, buttons with fixed widths, and form labels are also sensitive points. The solution is to use relative units (rem for font sizes, em or % for spacing), avoid fixed heights on text containers, and systematically test rendering at 200% zoom. CSS properties like min-height instead of height, overflow: visible instead of overflow: hidden, and media queries to adapt layout to zoom are the main tools.

Does your site have this issue?

106 RGAA criteria analyzed in 5 minutes by our AI.

Test your site for free

Impact on users

Approximately 2.2 billion people worldwide have a vision impairment. Among them, many use browser zoom daily to read web content. If a site becomes unusable at 200% zoom, these people are excluded. Text truncated by overflow:hidden is lost information — the user does not even know what they are missing. Overlapping text is unreadable because characters overlap and become an indecipherable mass. Buttons whose text overflows become confusing: the user cannot read the full button label. Older people are also very affected by this issue. With age, visual acuity naturally declines and zoom becomes a necessity, not a comfort. A site that does not support zoom effectively excludes seniors, a rapidly growing demographic among internet users.

Code example

Before (non-compliant)
<style>
  .card {
    width: 300px;
    height: 200px;
    overflow: hidden;
  }
  .nav-item {
    font-size: 14px;
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .btn {
    font-size: 12px;
    padding: 8px 16px;
    width: 150px;
    overflow: hidden;
  }
</style>
After (compliant)
<style>
  .card {
    max-width: 300px;
    min-height: 200px; /* min-height instead of height */
    overflow: visible;  /* visible instead of hidden */
  }
  .nav-item {
    font-size: 0.875rem;  /* rem instead of px */
    min-width: 120px;     /* min-width instead of width */
    white-space: normal;  /* normal instead of nowrap */
  }
  .btn {
    font-size: 0.75rem;
    padding: 0.5em 1em;   /* em instead of px */
    min-width: 150px;     /* min-width instead of width */
    overflow: visible;
  }
</style>

Frequently Asked Questions

How do I test 200% zoom on my site?
In your browser, use Ctrl + (or Cmd + on Mac) to zoom in. Zoom to 200% (shown in the address bar or browser settings). Browse each page and verify that all text remains readable, no content is truncated, and features remain usable. Also test text-only zoom via the browser's font size settings.
What is the difference between browser zoom and text zoom?
Browser zoom (Ctrl +) enlarges everything (text, images, layout) proportionally. Text zoom (browser font size settings) only enlarges text, without modifying image sizes or layout. WCAG criterion 1.4.4 primarily concerns text zoom. This is the most demanding test because the layout must adapt to larger text within the same containers.
Which CSS units should I use for font sizes?
Use rem as the primary unit for font sizes. Rem is relative to the root font size (html), allowing the user to control text size via browser settings. Avoid px for font sizes as they do not respect user preferences in all browsers. Em units are useful for padding and margins relative to text size.
My horizontal menu breaks at zoom. How do I fix it?
Use flexbox with flex-wrap: wrap so menu items wrap to the next line when space is insufficient. Replace fixed widths with min-width. Avoid white-space: nowrap on items containing text. Consider switching to a hamburger menu beyond a certain zoom threshold via a media query.

Does your site have this issue?

Scrutia audits your site against WCAG 2.1 AA criteria in 5 minutes. Keyboard navigation, ARIA components, visible focus, contrasts, and much more.

Run a free audit