Users should be able to zoom and scale the text up to 500%

The <meta name="viewport"> element controls how a page is displayed on mobile and responsive layouts. Two of its parameters — user-scalable and maximum-scale — directly affect whether users can zoom in on page content. Setting user-scalable="no" completely disables pinch-to-zoom and browser zoom controls, while a low maximum-scale value (e.g., 1 or 2) caps how far a user can zoom in.

Why This Matters

People with low vision frequently rely on zoom and screen magnification to read web content. When zooming is disabled or restricted, these users may be unable to perceive text, images, or interactive elements at all. This creates a significant barrier to accessing information.

WCAG Success Criterion 1.4.4 (Resize Text) requires that text can be resized up to 200% without loss of content or functionality. However, as a best practice recommended by Deque, pages should support zooming up to 500% (5x). This higher threshold better accommodates users who need substantial magnification and aligns with the principle of providing the widest possible range of accessibility.

This rule is classified as a Deque Best Practice and primarily affects users with low vision. While it goes beyond the strict WCAG 200% requirement, supporting 5x zoom is a meaningful improvement that costs nothing to implement.

How to Fix It

1. Remove user-scalable="no" from the content attribute of the <meta name="viewport"> element. If present, either remove it entirely or set it to yes.
2. Ensure maximum-scale is at least 5 (representing 500% zoom). If you don’t need to cap zoom at all, simply omit the maximum-scale parameter — browsers will allow unrestricted zooming by default.

Examples

Incorrect: Zooming Disabled

This viewport meta tag prevents users from zooming at all:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Incorrect: Zoom Restricted Below 500%

This viewport meta tag limits zooming to 200%, which falls short of the recommended 500%:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">

Correct: Zooming Allowed Up to 500%

This viewport meta tag explicitly permits zooming and sets the maximum scale to 5:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">

Correct: No Zoom Restrictions

The simplest and most accessible approach is to omit both user-scalable and maximum-scale entirely, allowing the browser to handle zoom without limits:

<meta name="viewport" content="width=device-width, initial-scale=1">

Correct: Explicitly Enabling User Scaling

You can also explicitly set user-scalable=yes for clarity, though this is the default behavior:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, maximum-scale=5">

Key Points

• The browser viewport (the visible area of the page) is separate from programmatic focus. When a user zooms in, only a portion of the page is visible at a time, but focus does not automatically follow the viewport. This is expected behavior — users scroll and pan to find content.
• Removing zoom restrictions does not break layouts when responsive design practices are followed. Modern CSS and flexible layouts adapt naturally to zoom.
• This rule checks that user-scalable="no" is not present in the <meta name="viewport"> element, and that maximum-scale is not less than 5 (500%).

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - Understanding Success Criterion 1.4.4: Resize Text

→