Resize Text: Ensuring Content Remains Usable at 200% Zoom

Introduction

Many users with low vision need to enlarge text to read comfortably. WCAG 1.4.4 (Resize Text) requires that text can be resized up to 200% without losing content or functionality. This means your website must remain usable when users zoom in using browser controls or assistive technology.

When websites use fixed pixel sizes or don’t account for text scaling, users may encounter cut-off content, overlapping text, or broken layouts that make the site unusable at larger text sizes.

What WCAG Requires

1.4.4 Resize Text (Level AA)

Text can be resized without assistive technology up to 200 percent without loss of content or functionality.

Exceptions:

• Captions (for video)
• Images of text

This means:

• Users must be able to zoom to 200% using browser controls
• All text must remain readable at this zoom level
• No content should be clipped, cut off, or hidden
• All functionality must remain operable
• Users shouldn’t need to scroll horizontally on standard viewports

Who Benefits

User Type	Benefit
Users with low vision	Can enlarge text to comfortable reading size
Older users	May need larger text for readability
Users with cognitive disabilities	Larger text can improve comprehension
Mobile users	Can zoom on small screens
All users	Flexibility to adjust text size to preference

Common Problems

1. Fixed Pixel Font Sizes

/* BAD: Fixed pixels don't scale with user preferences */
body {
  font-size: 14px;
}

h1 {
  font-size: 24px;
}

/* GOOD: Relative units scale with user settings */
body {
  font-size: 1rem; /* 16px default, scales with user preference */
}

h1 {
  font-size: 1.5rem; /* 24px at default, scales proportionally */
}

2. Fixed Height Containers

/* BAD: Fixed height cuts off enlarged text */
.card-title {
  height: 48px;
  overflow: hidden;
}

/* GOOD: Flexible height accommodates larger text */
.card-title {
  min-height: 48px;
  overflow: visible;
}

3. Text in Fixed-Width Containers

/* BAD: Fixed width causes overflow at larger text sizes */
.sidebar {
  width: 200px;
}

/* GOOD: Flexible width or responsive design */
.sidebar {
  width: 100%;
  max-width: 200px;
}

@media (min-width: 768px) {
  .sidebar {
    width: 25%;
  }
}

4. Viewport Units for Font Size

/* BAD: vw units don't respond to text-only zoom */
h1 {
  font-size: 5vw;
}

/* BETTER: Clamp with rem for fallback */
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Testing Resize Text

Browser Zoom Test

1. Open your website in a browser
2. Use Ctrl/Cmd + to zoom to 200%
3. Verify all text is readable
4. Check that no content is cut off or hidden
5. Ensure all interactive elements are still usable
6. Test horizontal scrolling (should be minimal on typical content)

Text-Only Zoom Test

Some browsers offer text-only zoom:

• Firefox: View → Zoom → Zoom Text Only
• This tests if your layout handles larger text specifically

What to Check

• [ ] All text is readable at 200% zoom
• [ ] No text is cut off or truncated
• [ ] Interactive elements are still clickable/tappable
• [ ] Forms remain functional
• [ ] Navigation is still usable
• [ ] No excessive horizontal scrolling
• [ ] Images don’t overlap text

Good Practices

Use Relative Units

/* Font sizes with rem */
body { font-size: 1rem; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
p { font-size: 1rem; }
small { font-size: 0.875rem; }

/* Spacing with em (relative to font size) */
.card {
  padding: 1em;
  margin-bottom: 1.5em;
}

/* Line height (unitless for best scaling) */
body {
  line-height: 1.5;
}

Flexible Containers

/* Use min-height instead of fixed height */
.content-box {
  min-height: 200px;
  /* Not: height: 200px; */
}

/* Allow text to wrap */
.button {
  white-space: normal;
  /* Not: white-space: nowrap; */
}

Responsive Design

/* Breakpoints for different screen sizes */
.container {
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Fluid typography */
h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

Impact of Poor Text Scaling

When text resize isn’t supported:

Issue	Impact
Cut-off text	Users can’t read important information
Overlapping elements	Content becomes illegible
Hidden interactive elements	Users can’t complete tasks
Horizontal scrolling	Navigation becomes frustrating
Broken layouts	Professional appearance is damaged

Tools for Testing

• Browser DevTools: Simulate zoom levels
• Zoom browser extension: Test various zoom percentages
• WAVE: Identifies potential zoom issues
• axe DevTools: Reports resize text failures
• Manual testing: Essential for comprehensive verification

Best Practices Summary

Do	Don’t
Use rem/em for font sizes	Use fixed pixel font sizes
Use min-height for containers	Use fixed heights that clip content
Allow text to wrap naturally	Force nowrap on text
Test at 200% zoom regularly	Assume pixel-perfect designs scale
Use fluid typography	Rely solely on viewport units
Design for flexibility	Design only for default text size

Related Articles

• Resize Text Implementation Guide - Detailed patterns
• Color Contrast Guide - Visual accessibility
• WCAG Compliance Hub - All accessibility evaluators

---

References

1. W3C - WCAG 2.2 SC 1.4.4 Resize Text
2. W3C - C28 Specifying the size of text containers using em units
3. W3C - G179 Ensuring no loss of content when scaling
4. WebAIM - Accessible CSS