• Success Criterion 1.4.5
  • Conformance level AA

Chart Axis Labels Rasterized Instead of Rendered as Text

1.4.5 — Images of Text

Scenario

Setting

A coworking-space booking app

What’s wrong

Charts whose axis labels/legends could be HTML/SVG-text but are rasterized.

Example 

<img src="desk-occupancy-chart.png" alt="Desk occupancy chart">
<!-- axis labels "Mon-Fri" and "0-100%" are burned into the PNG along with the bars -->

Why it matters

A member with low vision who zooms in to check Wednesday's occupancy sees the axis labels blur and lose their position relative to the bars.

How to test

Try to select chart axis labels and legend text: if they're baked into a rasterized chart image rather than rendered as HTML/SVG text, it fails.

How to fix

Render charts with SVG or HTML/CSS so labels stay real, scalable text at any zoom level.

<svg viewBox="0 0 400 200" role="img" aria-label="Desk occupancy by day">
  <text x="10" y="190" font-size="12">Mon</text>
  <!-- bars and remaining axis labels as real SVG text, not baked into a bitmap -->
</svg>

Outcome

A member zooms in on Wednesday's bar and the axis labels stay crisp instead of dissolving into pixels.

Who is affected

Low-vision members zooming into the chart lose the ability to read axis values sharply at any zoom level.

Learn more

Related scenarios