Developers and testers.
To meet WCAG criteria 1.4.4 Resize Text users must be able to resize the text up to 200% without lose of content or functionality.
This article describes how to test this by changing the default browser font size, and how to implement it.
Users should be able to resize text so that they can read it comfortably. The WCAG (Web Content Accessibility Guidelines) criteria states that text should be able to be resized without assistive technology up to 200 percent without loss of content or functionality.
Usually the browser will take care of this, unless we've implemented the website in such a way that it overrides this.
Content satisfies the Success Criterion if it can be scaled up to 200%, that is, up to twice the width and height. Authors may support scaling beyond that limit, however, as scaling becomes more extreme, adaptive layouts may introduce usability problems. For example, words may be too wide to fit into the horizontal space available to them, causing them to be truncated; layout constraints may cause text to overlap with other content when it is scaled larger; or only one word of a sentence may fit on each line, causing the sentence to be displayed as a vertical column of text that is difficult to read.
Source: https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html
How to resize text
Resizing text in Chrome
- Visit
chrome://settings/appearanceor Settings > Appearance - In Customise Fonts move the Font size slider from 16 (browser default) to 32
Resizing text in Firefox
- Visit
about:preferencesor Settings > General > Zoom - Check Zoom text only checkbox
- Zoom to 200%.
- `Ctrl` + `+.
- Ctrl + Scroll Up.
How to test
- Resize text in Browser A
- Confirm relative font size
- Resize text in Browser B
- Check content and functionality
Check that the font has doubled (at least) in size
Inspect the text using DevTools. Under the computed tab you can see the computed font sizes. Confirm that the font sizes have doubled. Alternatively you can use a Screen Ruler to check.
Check for loss of content or functionality
- All the content should still be readable
- Buttons, links and inputs should still be usable with mouse, inputs or other pointing devices.
Browser zoom
The WCAG Success technique G142 does state that you can use the browser zoom functionality to meet Success Criterion 1.4.4: Resize Text. However it is best practice to allow text to be resized in both ways.