How to Troubleshoot Text Resizing Issues

Summary

Use browser zoom and text-only resize techniques to identify whether text scaling issues are caused by responsive design behavior or restrictive font settings. These methods help determine when content fails to properly adapt to user scaling preferences.

Applies To (Environment)

Specify where and for whom this task applies.

• Product / Service: Website accessibility testing (WCAG compliance), browser-based content evaluation
• Version (if applicable): Not version-specific
• Platform / OS / Browser: Desktop browsers (Google Chrome, Mozilla Firefox) on Windows, macOS, or Linux
• User role / permissions: Content authors, developers, accessibility testers, QA analysts

Overview

Using the browser’s zoom feature at 200% will show text and user interface elements increase in size. If text is clipped or cut off, the result is a failure.

Often, any mobile-responsive breakpoints will be activated and applied when using the browser’s zoom feature. If this is the case, the content display will reflow to fit the screen dimensions, and often, text clipping is not an issue.

Troubleshoot Using Font Zoom and Text Resize

In Chrome

1. Go to chrome://settings/fonts or Chrome > Preferences > Appearance > Customize fonts. 
2. Increase the font size slider to at least 32 and return to the page you were testing. 
3. The font size of the page should have increased; if not, the font size of an element or the document has been set in absolute CSS units and has restricted the user preference, and is a failure of the WCAG AA criterion Resize text. 

In Firefox

1. Set the default font size under Settings > Language and Appearance. 
2. In the same settings area under zoom, users can select a checkbox to “Zoom text only.”
3. Once this option is checked return to the test page and use the browser zoom. 
4. The browser zoom will now increase only the font size of text content.

Troubleshoot using browser zoom

Using the browser’s zoom feature at 200% will show text and user interface elements increase in size. If text is clipped or cut off, the result is a failure.

Often, any mobile-responsive breakpoints will be activated and applied when using the browser’s zoom feature. If this is the case, the content display will reflow to fit the screen dimensions, and often, text clipping is not an issue.

How to troubleshoot using font zoom and text resize

In Chrome and Firefox browsers, it is possible to resize only the text of the page, leaving non-text user interface elements at their default sizes. 

Additional Information

Font zoom or modifying the browser’s default font size does not trigger the mobile responsive breakpoints defined in the page’s CSS. 

This is because there is no browser resize event triggered by this user technique. 

Font zoom or modification of the browser’s default font size is a common reason for the failure of the "Text is clipped when resized" accessibility check.