On each web page, does the text remain readable when the font size is increased to at least 200% (except in special cases)?
A person with low vision sets Firefox text zoom to 200%. On your site, headings enlarge correctly. But navigation labels remain at 12px — blocked. This is not an oversight: it is non-compliance with criterion 10.4.
This criterion requires two distinct things. Test 10.4.1 verifies that text remains present and readable after enlargement: no content must be truncated, hidden, or overlaid on another element. Test 10.4.2 goes further: text must actually enlarge. Text that is visible but locked at its initial size despite zoom fails 10.4.2.
Number 1 failure cause in audits: the combination of height: Xpx with overflow: hidden on text containers. At normal size, everything looks perfect. At 200% text zoom, the text exceeds the container and is silently cut off. The other frequent culprit: font-size in pixels, which ignore Firefox text zoom and do not enlarge at all.
The solution boils down to two rules. Use rem or em for all font sizes. Replace fixed pixel height with min-height in em on containers that hold text. The criterion is validated as soon as one of three zoom methods works: text zoom, graphical zoom, or a mechanism built into the page.
2 tests to confirm that text sizes use relative units
Text readable after 200% zoom
- Enable browser text zoom to 200% (in Firefox: View > Zoom, check "Zoom Text Only", then Ctrl/Cmd + up to 200%).
- Browse the page and verify that:
- No text is truncated or hidden by its container.
- No text overlaps with other text or a graphic element.
- Button labels, links, and form field labels remain fully readable.
- Repeat with browser graphical zoom (Ctrl/Cmd +) at 200%.
- If the page offers a built-in zoom control, test it as well.
- If at least one of the three methods allows text to remain present and readable, the test is validated.
Text enlarged after 200% zoom
- Successively enable text zoom at 200%, graphical zoom at 200%, then the page's zoom mechanism if it exists.
- For each method, verify that text is visually larger than at the initial size.
- Text that remains the same size despite text zoom is non-compliant — even if it remains visible.
- If at least one of the methods produces actual text enlargement, the test is validated.
Examples
❌ Non-compliant : Fixed pixel height that hides text at 200%
<nav>
<a href="/" style="height: 36px; overflow: hidden; font-size: 13px; display: flex; align-items: center; padding: 0 12px;">
Home
</a>
<a href="/services" style="height: 36px; overflow: hidden; font-size: 13px; display: flex; align-items: center; padding: 0 12px;">
Our services
</a>
</nav>The fixed height of 36px and overflow: hidden block container expansion. At 200% text zoom, the 13px font becomes 26px and exceeds the link height. Text is cut off: the user sees only half the navigation labels, or nothing at all depending on the browser.
✅ Compliant : Navigation with relative units and flexible height
<nav>
<a href="/" style="min-height: 2.25rem; padding: 0.5em 0.75em; font-size: 0.8125rem; display: flex; align-items: center;">
Home
</a>
<a href="/services" style="min-height: 2.25rem; padding: 0.5em 0.75em; font-size: 0.8125rem; display: flex; align-items: center;">
Our services
</a>
</nav>font-size in rem enlarges with text zoom. min-height in rem and padding in em allow the container to stretch to accommodate enlarged text. At 200%, links remain fully readable and clickable, with no overflow or hiding.
Tips and pitfalls
⚠️ max-height with overflow: hidden is as problematic as height
Many teams avoid fixed height but use max-height: 60px; overflow: hidden for layout reasons. The result is identical: text is cut at 200% text zoom. Remove overflow: hidden from text containers or replace max-height in pixels with an em value that grows with text.
💡 Text zoom and graphical zoom: two behaviors, two tests
Graphical zoom (Ctrl/Cmd +) enlarges everything, including layout — most sites pass this test effortlessly. Text-only zoom (Firefox only, via View > Zoom) enlarges only fonts and leaves the rest intact. It is the one that reveals weaknesses. A site where all fonts are in px will pass graphical zoom but fail text zoom, because Firefox does not resize font-size expressed in absolute pixels.
⚠️ Captions embedded in a video: exempt from the criterion
Captions burned directly into the video stream (called "open captions" or embedded captions) are part of the image. They cannot be resized independently: the browser does not perceive them as text. These captions are explicitly outside the scope of criterion 10.4. By contrast, WebVTT captions displayed by the <track> element are in the DOM and remain subject to the criterion.
⚠️ Text in images and text drawn in <canvas> are also exempt
Text rendered as an image (<img src="banner-title.png">) or drawn in JavaScript in a <canvas> does not respond to browser text zoom. Criterion 10.4 does not apply to these cases. Note: this does not exempt them from other criteria. Text images must have a relevant alternative (criterion 1.1), and the content of a <canvas> must be accessible by other means.
💡 Prefer rem for fonts, em for internal spacing
rem is relative to the font size defined on <html>. If the user has configured a large font in their browser or uses text zoom, all rem adapt automatically. Use rem for font-size to respect system preferences, and em for padding and min-height of components, so they grow proportionally to the text they contain.
⚠️ Media queries in em respond to text zoom, not those in px
A rule @media (max-width: 768px) ignores text zoom — only graphical zoom modifies the viewport in pixels. By contrast, @media (max-width: 48em) triggers when text zoom exceeds a certain threshold, because em in media queries are relative to the browser's default font size (usually 16px). This is not a requirement to validate 10.4, but anticipating this behavior avoids broken layouts at high zoom.
Frequently asked questions
How to test text zoom at 200% to validate RGAA criterion 10.4?
In Firefox: View > Zoom, check "Zoom Text Only", then Ctrl/Cmd + up to display 200% in the address bar. Chrome does not offer native text zoom: use its standard graphical zoom or an extension like "Zoom Text Only". Firefox is the reference browser for this test because it isolates exactly the behavior the criterion seeks to verify.
What is the difference between tests 10.4.1 and 10.4.2 of the RGAA criterion?
10.4.1 checks readability: text must not be truncated, hidden, or overlaid on anything else. 10.4.2 checks actual enlargement: text must really be larger than at the initial size. Text that is fully visible but locked at its starting size fails 10.4.2 while passing 10.4.1. Both tests are necessary to validate the criterion.
What impact does text overlap have on criterion 10.4 compliance?
Yes. As soon as text overlaps another element or part of a character is cut off by its container, test 10.4.1 fails. The requirement is that text be "present and readable" — a label cut at mid-height does not meet this condition. The threshold is not the total disappearance of text, but any degradation of readability.
Which zoom methods must be applied to validate RGAA criterion 10.4?
None. A single working method is sufficient to validate the criterion. In practice, test Firefox text zoom first: it is the most demanding method and the most used by people with low vision. If your site uses rem and em correctly, graphical zoom will work anyway. No need to test an embedded zoom mechanism if none exists on the page.
Why use rem instead of px to satisfy RGAA criterion 10.4?
For font-size properties, yes — pixels do not respond to Firefox text zoom, which causes test 10.4.2 to fail. For margins and spacing, pixels do not directly block 10.4, but can create overlaps at high zoom. Prioritize migration in this order: first font-size in rem, then fixed height into min-height with relative units, finally internal padding in em for the densest text components.