Zoom and Reflow

7 minute read

Last updated: Feb 23, 2026

Summary

Responsive design allows a website to adapt to various screen sizes and viewports. It also allows a website to adapt when people increase their magnification or zoom settings. In this way, people can optimize the appearance of a website to meet their needs.

Overview

Did you know that over half of internet traffic comes from mobile devices? Responsive design allows users to view a webpage on different devices and screen sizes. The design adjusts to fit into a single column when viewed on a smaller screen. Text and images automatically resize to fit the smaller screen. Effective responsive design minimizes the need for manual resizing and excessive scrolling. The output is a website that is easier to read and navigate.

Many people need to adjust text size and magnification settings to optimize the appearance of a website to meet their needs. It is essential that websites give people the ability to control these settings. The same responsive design that allows web pages to adapt to different screen sizes also allows the design to adapt to different levels of magnification. People can select the larger font sizes or higher zoom settings they need, and the design automatically responds. The content reflows into fewer columns as magnification increases, so people are not forced to scroll in two directions to read text or view the page. The ability to resize and reflow text depends on responsive design.

As a best practice, developers can use tools to see how the page looks and feels on a mobile device or tablet. Using responsive design, a developer can verify whether the web page can appropriately resize the content on different resolutions to simulate the mobile user experience from their laptop or desktop. When testing for accessibility, increasing magnification should have the same effect as decreasing screen size.

Who is Helped

Individuals with low or limited vision who rely on screen magnification or larger font sizes benefit from responsive design. People with learning disabilities that impact reading skills, like dyslexia, may also benefit.

On a responsive website, a page remains readable when people use the browser’s built-in screen magnifier. This readability also applies when people apply larger font sizes through the browser settings, operating system settings, or user-supplied style sheets.
Responsive design eliminates horizontal scrolling in a line of text. Continually scrolling back and forth to read a line of text is distracting and significantly degrades reading flow and comprehension.

Everyone benefits from the increased readability derived from responsive design.

Guidelines

Responsive web design became popular as people started using mobile devices to access the web, and websites had to adjust their appearance to work on a tablet or phone. Most websites now use this type of design. Responsive design dynamically changes the website’s layout based on a device’s screen size and resolution. It uses CSS (Cascading Style Sheet) techniques like fluid sizing to change image and text sizes and flexible grid systems that change page layouts. These techniques resize the text and reflow the screen display based on screen width breakpoints defined in CSS media queries.

There are two Web Content Accessibility Guidelines (WCAG) criteria that are associated with responsive design:

Resize Text (200% Zoom)

WCAG requires that a web page can be resized without assistive technology up to 200% without loss of content or functionality. This guidance means that when a person uses their browser or computer settings to increase the size of the web page up to 200%, everything on the page is still readable and functional in accordance with WCAG 2.1 Success Criterion 1.4.4.

When the web page is increased by 200%:

The content displayed on the web page, especially the text, should increase in size by 200%. Only video captions and images of text are exempt from this requirement.
One block of content should not overlap or hide another block of content.
Content should not become unreadable due to the loss of good contrast.

A web page resized at 200% shows an image overlapping nearby text. Only parts of the text are readable. — Figure 1: Enlarged Text Resulting in Image Overlapping Text

A web page resized at 200% shows white text that was initially located over a dark background and is now over a light background. The text has poor color contrast over the light background. — Figure 2: Enlarged Text Resulting in Poor Color Contrast

The best way to avoid this issue is to build your website using a responsive web design. This term refers to a design that adjusts how a web page appears based on screen size or magnification level. Typically, this involves reflowing content into a single column when viewed on a smaller screen or with higher zoom settings.

Reflow Content (400% Zoom)

Your page needs to adapt when zoomed in up to 400% without loss of content or functionality, in accordance with WCAG 2.1 Success Criterion 1.4.10. The user should only need to scroll the page in one direction when they set the browser zoom to 400% and the display to 1280 px wide. For languages that are written horizontally, only the vertical scrollbar should be present. None of the content should be hidden or overlap. Websites built with responsive design accomplish this by reflowing content to fit smaller screens. This same technique also works to accommodate users who require higher zoom settings.

When the web page is increased by 400%:

The content displayed on the web page should increase in size by 400%.
Text must increase by at least 200%.
One block of content should not overlap or hide another block of content.
Content should not become unreadable due to the loss of good contrast.
Only one scrollbar should be present.

Exemption: While you can adjust most content to display successfully in a responsive design, content that requires two-dimensional scrolling for usage or meaning is exempt from the criterion to work with a single scrollbar (e.g., a video, map, or large data table).

How to Test

As a best practice, developers can use tools to see how the page looks and feels on a mobile device or tablet. This quick check is a good indication of the likely success of the zoom and reflow tests.

You can use browser settings to test different viewport sizes. For example:

Firefox has a built-in mobile viewport emulator with a quick key shortcut of Command + Option + M (Mac) or Control + Shift + M (Windows).
Chrome’s mobile emulator is available through its developer tools: Command + Option + I (Mac) or Ctrl + Shift + I (Windows). Once the developer tools are open, click the “Toggle device mode” icon.

200% Zoom (Resize Text)

Use the browser settings to zoom the application to 200%.
Visually inspect the application. Check that the zoom settings are applied and all content remains visible and readable.
Interact with the content to ensure there is no loss in functionality.

400% Zoom (Reflow)

Use the browser settings to zoom the application to 400% and set the display to 1280px wide, or use an accessibility test tool like the ARC Toolkit to change the browser size and settings for this test.
1. Open the ARC Toolkit browser extension.
2. Click the “Highlight” option.
3. Click the “Check Page Reflow” option.
Visually inspect the application. Check that the zoom settings are applied and all content remains visible and readable.
Check that all functionality is available with either a horizontal or vertical scrollbar, based on the language used, but not both. Content that requires two-dimensional scrolling, such as a video, is exempt from this requirement.
Interact with the content to ensure there is no loss in functionality.