- 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
const ctx = canvas.getContext("2d");
ctx.font = "12px sans-serif";
ctx.fillText("Mute", 10, 20);
<!-- meeting toolbar labels are drawn on canvas at a fixed pixel size, entirely outside the browser's zoom and text-scaling pipeline --> Why it matters
A participant with low vision zooming their browser during a call still sees tiny, unreadable canvas-drawn button labels.
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
Draw interactive labels as HTML or SVG text, not canvas fillText, so zoom and text-size settings actually reach them.
<button class="mute-btn">Mute</button>
.mute-btn { font-size: 1rem; } Outcome
The participant zooms in during a call and reads every meeting control label clearly.
Who is affected
Low-vision users, since canvas content is invisible to both browser zoom and any OS-level text-size setting.
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