WCAG 1.4.4 Resize Text: How Large Should Website Text Be?

WCAG 1.4.4 Resize Text: How Large Should Website Text Be?

WCAG 1.4.4 requires that text can be resized up to 200% without assistive technology and without loss of content or function. This is a Level AA success criterion. The rule is not a target font size in pixels. It is a requirement that doubling the text size does not break the page.

What the criterion actually means

• Text must be scalable to 200% (double its size) using standard browser controls or user settings.
• Exceptions are captions and images of text. All other text must remain readable and usable.
• Resizing must not hide content, remove functionality, or require horizontal scrolling for reading.

How large should website text be — practical guidance

There is no single pixel size required. Treat the 200% rule as a scale requirement. Use a sensible base font size and let users scale from there. Common practice is to set the browser default or use 100% or 16px as a baseline and rely on relative units. That keeps text flexible and predictable when users increase size.

Key CSS rules to support WCAG 1.4.4

Use relative units for fonts and layout

Use rem or em for font sizes and spacing. Example: set html { font-size: 100%; } and use rem for body and headings. Avoid fixed px for primary type. rem makes scaling consistent across the page.

Avoid fixed heights and clipped containers

Do not lock text into containers with a fixed height. Avoid overflow: hidden on blocks that contain text. Let content grow vertically so lines wrap naturally at larger sizes.

Do not use transform: scale to resize text

Scaling text with CSS transform changes layout and can break hit targets and reading order. Use font-size changes instead.

Keep interactive controls flexible

Buttons, links and form fields must remain usable after text enlarges. Make widths fluid, allow wrapping of labels, and ensure touch targets stay large enough and do not overlap.

Avoid text as images

Images of text cannot be resized by the user. Where possible use real text and CSS. If an image must include text, provide a scalable text alternative.

Testing checklist — quick, reliable tests

1. Open the page in a browser and use zoom to 200% (Ctrl or Cmd plus keys). Check content and controls still work.
2. In developer tools, increase the root font-size to 200% or set html { font-size: 200%; } to test CSS handling.
3. Test on a mobile device. Do not disable pinch-to-zoom. Ensure no critical content requires horizontal scrolling to read.
4. Check form fields, menus, and modal dialogs. Controls must remain operable and visible at 200%.
5. Confirm that line lengths remain readable and that no text is clipped or overlapped.

Common failures and how to fix them

Failure	Why it breaks at 200%	Fix
Text clipped by fixed-height box	Container does not grow with enlarged text	Remove fixed height, use min-height or let height auto. Allow vertical growth.
Layout shifts off-screen or requires horizontal scroll	Rigid widths or absolute positioning	Use max-width, percent widths, and flow layout. Allow wrapping of items.
Controls overlap or become too small	Fixed dimensions or unscalable icons	Make controls fluid and pad targets with relative units. Use scalable SVG icons.
Text provided only as an image	Images do not scale like real text	Replace with real text, or provide an accessible, scalable fallback.

Decision framework for remediation

1. Start with typography: switch px to rem/em for font-size and spacing.
2. Fix containers: remove fixed heights and disabled overflow on text blocks.
3. Adjust layout breakpoints so components stack instead of squeezing.
4. Update controls: make buttons and inputs flexible and test for overlap.
5. Retest at 200% and on mobile. Repeat until no loss of content or function.

Real-world scenarios to watch

• Forms with inline labels. Ensure labels can wrap and inputs stay visible.
• Menus and navigation bars. Ensure items wrap or stack rather than being clipped.
• Data tables. Allow horizontal scrolling for wide tables or provide responsive table patterns that keep cells readable.
• Modals and tooltips. Make sure they remain fully visible and reachable with keyboard and touch.

Final practical tips

• Prefer rem units for site-wide consistency.
• Test using browser zoom and device zoom, not only code checks.
• Do not disable browser or device text zoom. That blocks users from resizing.
• Keep a short automated test and a manual 200% test in your release checklist.

Following WCAG 1.4.4 is about scale and resilience, not a single font-size value. Make type and layout flexible, test at 200%, and fix the containers and controls that break. That is the practical path to compliance and better usability for everyone.