When users increase their browser’s default font size or enlarge text using their browser’s zoom functionality, the page content should still be readable.
For an overview of this issue, see Enlarged text in our IT Accessibility Checklist.
The W3C Web Content Accessibility Guidelines defines 200% as the minimum zoom level below which all content should still be readable. Testing your web page or application with 200% zoom is easiest in Firefox. Here’s how:
- Turning on text-only zoom (View > Zoom > Zoom Text Only).
- Zoom in six times using Command + (Mac) or Control + (Windows).
- Explore the page to be sure all content is readable. Watch especially for content that disappears beyond the margins of its container or overlaps with other text.
How to avoid loss of content when text is enlarged
Use responsive design to optimize the layout of your page for screens of various sizes. Wherever possible use percentages rather than pixels for sizing and placement. Especially avoid constraining the height of a container that includes text. Let the container grow as needed to accommodate the changing text size.