Resize Text
Text can be resized without assistive technology up to 200 percent without loss of content or functionality, except for captions and images of text.
What it means
The intent of this success criterion is to ensure that visually rendered text, including controls and labels using text, can be made larger so that it can be read more easily by people with milder visual impairments, without requiring the use of assistive technology (such as a screen magnifier). Users may benefit from scaling all content on the web page, but text is most critical. The scaling of content is primarily a user agent responsibility. User agents that satisfy UAAG 1.0 Checkpoint 4.1 allow users to configure text scale through a number of mechanisms - including zoom (of the entire page's content), magnification, text-only resizing, and allowing the user to configure a size for rendered text. The author's responsibility is to create web content that does not prevent the user agent from scaling the content effectively. Authors may satisfy this success criterion by verifying that content does not interfere with user agent support for resizing text, including text-based controls, or by providing direct support for resizing text or changing the layout. An example of direct support might be via server-side script that can be used to assign different style sheets. Content satisfies the success criterion if it can be scaled up to 200% using at least one text scaling mechanism supported by user agents. If the author is using a technology whose user agents do not provide support for specific text scaling mechanisms, the author is responsible for providing this type of functionality directly, or providing content that works with the type of functionality provided by the user agent. For instance, if the user agent doesn't provide full-page zoom functionality, but does let the user change the text size, the author is responsible for ensuring that the content remains usable when the text is resized.
Failing example
/* Fails: font size set in px, container has overflow:hidden */
.card { height: 120px; overflow: hidden; }
p { font-size: 14px; }How to fix it
/* Pass: use relative units and allow container to grow */
.card { min-height: 120px; overflow: visible; }
p { font-size: 0.875rem; } /* scales with browser zoom */How A11yRisk detects this
A11yRisk detects this criterion automatically.
Scan your site for this violation →