Thanks to a generous grant from the InVision Design Forward Fund, we're in the process of redesigning the site. You can follow along with our plan on GitHub, and review our purpose and team. Interested in helping out? Check out our contributing guidelines.
Resize text and make sure everything on the page works. Repeat until you get to 200% zoom. Seems simple? It is.
- Sight: This method tests the visual appearance of content on the page
- Interact with content via a pointer: This method tests mouse interactions
If you know of a method that doesn’t require either of these abilities, please update this Quick Test.
People with low vision may need to increase the size of text in order to use the page.
When someone resizes text, any of the following can break the page:
- text on the page is no longer readable
- content is lost or truncated
- interactive elements overlapping each other
How to test
Testing is pretty straight forward.
- Choose the right browser
- Resize text
- Check everything
Choosing a browser
Firefox is the best browser for testing WCAG Resize Text (Success Criterion 1.4.4).
- It makes resizing text really easy
- It informs you of the current zoom level
- It’s available on all popular Operating Systems
Safari and Chrome work, but not as well:
- Ability to resize text is not obvious
- Does not display the current zoom level
- Safari is only available on macOS
Edge won’t work:
- Edge only supports text-only resize in Reading view
Resizing text in Firefox
- Go to View > Zoom and select Zoom Text Only
- Zoom to 200%
- Ctrl + +
- Ctrl + Scroll Up
Resizing text in Chrome
chrome://settings/fontsto the address bar and then return on your keyboard
- Increase the font size to 32px (default is 16px)
After doubling the size of text, verify the following:
- All content on the page should still be readable
- Text shouldn’t be too cut off
- Text needed for understanding shouldn’t be truncated
- Text shouldn’t overlap too much
- Interactions still work
- Buttons, links, and inputs are still usable with mouse, touch, or similar
Some people might not need to zoom text up to 200%. And there might be a level of zoom below 200% where content doesn’t work.
To do a more thorough job, you should check the page at each of the zoom steps the browser makes to see if there are any odd breakpoints.
- Images of text won’t resize
- Captions over videos likely won’t resize
Can I zoom everything instead of resizing text only?
Without going too deep into the Success Criterion, it does not require you to use text-only zoom. But I think it’s still a good idea to make sure that pages work well with text-only zoom since some people may want only the text to be bigger.
Practically speaking, I don’t think many people know that text-only resizing is available. And that’s assuming they’re using a browser that supports it. I’d expect most folks that want larger text would use regular browser zooming more often than text-only zooming.
There is even a Success Technique (G142) that says you can pass the Success Criterion by zooming everything.Edit on GitHub