Text unreadable at 200% zoom
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.
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
<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><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?
What is the difference between browser zoom and text zoom?
Which CSS units should I use for font sizes?
My horizontal menu breaks at zoom. How do I fix it?
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