In plain English
Lots of people bump the zoom up to read comfortably. This rule says your store has to hold together when they do, up to 200%, with nothing cut off, hidden, or overlapping, and no forced side-to-side scrolling just to read a line.
The trouble usually comes from designs built with fixed sizes: a button with a locked height, a card that hides anything that overflows, text pinned to a pixel width. Zoom the text and it spills out or gets chopped.
Who this is for
- People with low vision who enlarge text as their everyday setting.
- Older shoppers, and anyone reading on a small or far-away screen.
- Temporary situations: tired eyes, a cracked screen, bright glare.
What “good” looks like
Build flexible containers that grow with their text instead of clipping it.
/* Good: sizes scale with text, box grows to fit */
.button { padding: 0.6em 1em; min-height: 2.75em; }
.card { height: auto; overflow: visible; }
/* Bad: locked pixel height clips text when zoomed */
.button { height: 40px; overflow: hidden; }Test it: zoom your key pages (product, cart, checkout) to 200% and make sure everything is still readable and clickable.
Where stores get it wrong
Fixed-height buttons and badges that clip their label when zoomed, sticky headers that swallow half the screen at high zoom, and text set in pixel-locked boxes. Catch these in a quick DIY check; they appear often on the common failures list.