WCAG 1.4.4 Resize Text: How to Support 200% Text Zoom

What This Criterion Requires

WCAG 1.4.4 requires that text can be resized without assistive technology up to 200 percent without loss of content or functionality. This means that when a user zooms in to 200% using the browser zoom function or increases the default font size, all text content must remain readable, no content should be clipped or hidden, and all functionality must remain available. This criterion does not apply to captions on video or images of text (covered by 1.4.5). To meet this criterion, developers should use relative units such as em, rem, or percentages for font sizes instead of fixed pixel values. Layout containers should be flexible enough to accommodate text that is twice its default size. Fixed-height containers that clip text, absolute positioning that causes overlaps, and CSS overflow:hidden on text containers are common causes of failure. The criterion focuses specifically on text content and does not require that the overall page layout remain identical at 200%, only that text remains readable and functional.

Why It Matters

Many people with low vision need to enlarge text to read it comfortably. Unlike users who rely on full screen magnification, some low vision users prefer to simply increase text size because it allows them to see more content at once rather than viewing a magnified portion through a small viewport. Older adults commonly increase text size as their vision changes with age. Users with certain types of dyslexia may also find larger text easier to read. When text cannot be resized or when resizing causes text to be clipped, hidden behind other elements, or truncated, these users lose access to the content entirely. Browser text zoom is one of the most commonly used accessibility features across all platforms, and yet many websites break when users attempt to increase text size. Ensuring that text can be enlarged to 200% without problems is a fundamental requirement for making content accessible to the large population of users with low vision.

Common Failures and How to Fix Them

<style>
.card {
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.card-title {
  font-size: 16px;
}
.card-text {
  font-size: 14px;
}
</style>
<div class="card">
  <h3 class="card-title">Service Plan</h3>
  <p class="card-text">Our premium plan includes all features...</p>
</div>

<style>
.card {
  width: 100%;
  max-width: 300px;
  min-height: 200px;
  overflow: visible;
}
.card-title {
  font-size: 1rem;
}
.card-text {
  font-size: 0.875rem;
}
</style>
<div class="card">
  <h3 class="card-title">Service Plan</h3>
  <p class="card-text">Our premium plan includes all features...</p>
</div>

<style>
h1 {
  font-size: 5vw;
}
p {
  font-size: 2vw;
}
</style>

<style>
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}
p {
  font-size: clamp(1rem, 2vw, 1.25rem);
}
</style>

How to Test

1. Zoom the browser to 200% (Ctrl/Cmd + several times) and verify that all text content is still fully visible and readable without horizontal scrolling for single-column content.
2. Check that no text is truncated, clipped by overflow:hidden containers, or hidden behind other elements at 200% zoom.
3. Verify that all interactive controls remain usable and that navigation menus, forms, and buttons are still accessible at 200% zoom.
4. Inspect the CSS for fixed pixel font sizes, fixed-height containers with overflow:hidden, and viewport-unit-only font sizes.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

• Wordpress Accessibility Checklist
• Shopify Accessibility Checklist
• Squarespace Accessibility Checklist
• Wix Accessibility Checklist
• Webflow Accessibility Checklist
• Framer Accessibility Checklist

Further Reading

• Wcag Explained Plain English
• Five Minute Accessibility Audit
• Color Contrast Guide

Related WCAG Criteria

• WCAG 1.4.10
• WCAG 1.4.12