- Success Criterion 1.4.4
- Conformance level AA
Canvas-Rendered Text That Ignores Browser Zoom Completely
1.4.4 — Resize Text
Scenario
Setting
A video-conferencing app's meeting controls
What’s wrong
Canvas-rendered text that ignores browser zoom/text scaling entirely.
Example
html { font-size: 14px; } /* fixed px, breaks at 200% browser zoom */Why it matters
Low-vision people who enlarge text instead of using a screen reader.
How to test
Set browser zoom to 200% on any canvas-rendered text: canvas text ignores browser zoom entirely and won't scale — confirm by comparing rendered size before/after zoom.
How to fix
At 200% text size/zoom, all content and controls must remain visible, readable, and usable — nothing clipped, overlapped, or lost. html { font-size: 100%; } body { font-size: 1rem; } /* scales with zoom */ Text sized in rem/em scales when the user zooms; hard-coded pixel sizes can get clipped or overlap.
Outcome
On a video-conferencing app's meeting controls, this barrier is gone for low-vision people who enlarge text instead of using a screen reader — they can finish what they came here to do.
Who is affected
Low-vision people who enlarge text instead of using a screen reader.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Text and Controls That Get Cut Off at 200% Zoom
- Form Fields That Don’t Grow When Text Is Enlarged
- Font Size Set in Viewport Units That Ignores Browser Zoom
- Viewport Meta Tag That Disables Pinch-to-Zoom on Mobile
- Fixed-Height Containers That Clip Content at 200% Zoom
- Button or Nav Text That Overflows Its Fixed-Size Container