• 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

Related scenarios