Why does my website break when you enlarge the text?

Text that cannot be enlarged is a known WCAG issue

A site that "breaks" as soon as a customer increases the text size is almost always caused by fixed dimensions: text, buttons or containers set in pixels instead of units that scale. When a customer increases the text size in the browser, a box with a fixed pixel height remains the same size, and the text inside it overflows, overlaps other elements or is cut off. Menus that fit exactly at the standard size, collapsible sections that do not grow with the text and buttons whose text extends beyond the edge are the most common symptoms.

This is not an aesthetic flaw but a functional problem: if a label becomes illegible or a button is no longer clickable because text runs over it, a customer can no longer complete a step in the checkout process. This affects the same vulnerable areas as keyboard control of the entire checkout: a scaling problem that looks harmless on the core pages can be decisive at the checkout step or login screen. Headings and subheadings are also at risk: if a structural element collapses when enlarged, the reading order becomes strange, something that also occurs in the broader discussion of headings, structure and navigation.

Where this appears in WCAG 2.1: the enlargement criterion

WCAG 2.1 requires that text must be able to be enlarged to a certain percentage without loss of content or functionality; this is the principle behind the criterion for resizable text, as stated in the directive itself. In practice, a scan tests this by loading the page at multiple text sizes and checking whether text is cut off, overlaps or becomes illegible. What an automated test cannot see is whether the page is still pleasant to use or only technically "not broken" — that difference is among the things that an automated scan cannot assess.