Users should be able to zoom and scale the text up to 500%
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Never take zoom control away — users decide how big text should be.
Why this matters and how to fix it
Why this matters
Many users with low vision or on small screens depend on system zoom and pinch-to-zoom to read comfortably. If zoom is disabled or limited, users may be unable to enlarge text sufficiently, making content unreadable and blocking access.
How to fix this issue
Allow zooming by removing `maximum-scale`, `minimum-scale`, and `user-scalable=no` from the viewport meta tag. Use a flexible and accessible default such as `width=device-width, initial-scale=1`.
Developer guidance
Check your base HTML templates or layout components for restrictive viewport settings. Prevent teams from shipping `user-scalable=no` via linting or CI review. Test real devices, not just Chrome DevTools — touch interaction matters.
Code examples
Incorrect Implementation
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Correct Implementation
<meta name="viewport" content="width=device-width, initial-scale=1">Real-World Examples
Before
<!-- Dashboard layout prevents zoom entirely -->
<meta name="viewport" content="initial-scale=1, user-scalable=no">After
<!-- Zoom enabled; users can enlarge text freely -->
<meta name="viewport" content="width=device-width, initial-scale=1">CSS Example (Guidance)
/* Ensure page layout adapts when zoomed */
body {
max-width: 70rem;
margin: auto;
padding: 1rem;
}
img, video {
max-width: 100%;
height: auto;
}Manual testing
- 1. Inspect the <meta name="viewport"> tag in the <head>.
- • Confirm it does NOT contain `user-scalable=no`, `maximum-scale`, or `minimum-scale`.
- 2. On a mobile device (not just DevTools), pinch-to-zoom the page.
- • Expected: The page zooms smoothly and scales text clearly.
- 3. On desktop, zoom to 400–500% using browser zoom (Ctrl/Cmd + '+').
- • Expected: Text remains readable, no clipping, no horizontal scroll for simple layouts.
- 4. If content breaks at high zoom, fix the CSS — do NOT re-disable zoom.
Trusted by organizations across Europe working toward WCAG and EAA conformance