1.4.4 Resize Text

Key Points

• Text must remain legible and functional when zoomed up to 200%.
• Avoid fixed pixel sizes — use relative units like em, rem, %, or vw.
• Layouts should be responsive, not break or hide content when zoomed.
• Users should not have to scroll horizontally on small screens (for normal reading content).
• Applies to text, not images of text.

Short Summary

Text must scale properly when zoomed, so users can read comfortably without losing content or breaking layout — ensuring inclusivity for people with low vision.

Example Issues and Fixes

Fixed Font Size (Breaks on Zoom)

<div class="flex w-full flex-col items-center justify-center text-center gap-8 p-8">
  <div style="font-size:14px;">
    Our goal is to make the web accessible for everyone.
  </div>
</div>

<div class="flex w-full flex-col items-center justify-center text-center gap-8 p-8">
  <div class="text-base md:text-lg">
    Our goal is to make the web accessible for everyone.
  </div>
</div>

Quick Checklist

• Can text be resized to 200% without loss of content or functionality?
• Use relative units (em, rem, %) for font sizes.
• Avoid fixed-height containers that clip zoomed text.
• Ensure responsive layout prevents horizontal scrolling.
• Test text resizing in multiple browsers and devices.