Page Integrity when Zooming

Zooming may work marginally differently with some browsers, but on the whole with responsive design, web page content should zoom by 200% without disturbing the layout, to the degree that items do not reflow. On desktop/laptop computers, 200% is usually achieved by using the key combination of Ctrl + or Apple key + 5 times in most browsers. If content is disrupted by this process then there may be the need to resort to text only resizing, through the use of assistive technologies or changing font sizes in the browser settings. Some webpages also offer text size changes so that images remain in their original state. Text zooming tends to break the integrity of a web page's design if it goes above 150%

zoom comparisons

provided by Patrick H. Lauke on a Webaim discussion about the subject of Browser zooming sufficient for WCAG 1.4.4 (resize text)


Depending on the type of mouse you are using it is possible to test for zooming by using the mouse wheel or Ctrl + (Cmd + on Mac) and Ctrl - (Cmd - on Mac) and Ctrl + 0 (Cmd + 0 on Mac) to return to normal in Chrome, Internet Explorer (Edge) and Firefox.   

The Web Developer toolbar in Firefox has a resizing menu that also offers different resolutions and a chance to check the window size.



This technique may be used to test the following sections of best practice.

Document Section Heading
WCAG 2.0 1.4 Make it easier for users to see and hear content… More Info
WCAG 2.0 1.4.4 Resize text More Info

See Also

WCAG 2.0: Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.  Understanding Guideline 1.4

1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA) How to Meet 1.4.4 | Understanding 1.4.4