WCAG 1.4.4 — Resize Text — text cannot be resized to 200% without loss

Who Is Affected

Low vision users who need to magnify text to read, older adults with presbyopia, users with dyslexia who benefit from larger text, and anyone temporarily needing magnification due to eye strain or poor lighting conditions.

What This Means

People must be able to zoom text up to 200% (double the normal size) without losing content or functionality. When text is zoomed, it should reflow naturally within its container rather than getting cut off or overlapping other elements.

Common failures include fixed-width containers that clip enlarged text, absolute positioning that causes overlap, and small viewport settings that prevent proper text scaling. Text embedded in images also fails because it cannot be resized by the browser.

Fix: CMS / Theme

Most text resize failures stem from CSS that constrains text containers or uses fixed dimensions. This is typically a theme-level issue affecting the entire site.

1. Test your current site: Set browser zoom to 200% and navigate through key pages. Look for cut-off text, overlapping elements, or horizontal scrolling.

2. Review CSS for fixed dimensions:

   • Replace fixed width and height with max-width and min-height
   • Use relative units (em, rem, %, vw) instead of pixels for text containers
   • Avoid overflow: hidden on text containers

3. Update responsive design breakpoints: In Joomla: Modify your template's CSS file or custom.css In WordPress: Edit your theme's style.css or use the Customizer → Additional CSS

4. Common CSS fixes:

   /* Replace fixed widths with flexible containers */
   .content-wrapper {
     width: 100%;
     max-width: 1200px;
   }
   
   /* Ensure text containers can expand */
   .text-block {
     min-height: 2em;
     overflow: visible;
   }
   

5. Test at 200% zoom after each change to verify text remains readable and functional.

Fix: Content Editor

If specific pages or elements are failing while others work correctly:

1. Identify problematic content: Test the failing page at 200% browser zoom.

2. Remove fixed-size constraints:

   • Avoid setting specific pixel widths on text blocks
   • Don't force text into tables with fixed column widths
   • Remove custom CSS that uses position: absolute on text elements

3. Replace text images: If you have text embedded in images, extract that text and format it as HTML text instead. Images cannot be resized by browser zoom.

4. Check custom styling: Remove any inline styles that set specific dimensions on text containers.

Standard Reference

WCAG 2.1 Success Criterion 1.4.4 — Resize Text, Level AA

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

• W3C Understanding SC 1.4.4
• WCAG Technique G142 — Using a technology that has commonly-available user agents that support zoom
• WCAG Technique G179 — Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width
• WCAG Technique C28 — Specifying the size of text containers using em units
• WCAG Failure F69 — Content not available when text resized to 200%
• WCAG Failure F80 — Opening new windows without user awareness