Estimated reading time : 5 min · Published
Start with the question the data answers
State the question or decision before drawing. Are you comparing a trend, distribution or a few exact values? Choose a form that reveals the relationship, and use a table when every number matters more than the overall shape.
Show scope, units, period and source near the figure. A percentage without its denominator or an unexpectedly truncated axis can mislead. The measurement guide helps interpret indicators before publishing.
- Question and unit explicit.
- Source and period visible.
- Chart chosen for the relationship.
Explain the content outside the image
Give the visual a short alternative identifying its subject. For a complex chart, add a long description visible to everyone or a table of values. Explain trends, gaps and exceptions needed to understand the conclusion.
W3C advice on complex images distinguishes short identification from detailed information. A long string of values in an alt attribute is difficult to hear; structured HTML may serve readers better.
Fictitious example: four periods A, B, C and D contain 10, 0, an unknown value and 15 units respectively. B’s zero is a measurement; C’s absence is not. Do not plot C at zero or silently connect periods as though every one had been observed. The text must explain the gap as well as available values.
A useful description states that the last known value exceeds the first by 5 units, but the series does not demonstrate continuous growth: B is zero and C is missing. Identify series with labels or markers rather than color alone. Keep the description and value table available outside the image; they must not depend on hovering over a point.
- Subject named in the alternative.
- Values and trends available as text.
- Long description structured where needed.
Scroll the table horizontally to read every column. With a keyboard, focus the table area and use the arrow keys.
| Proposed period | Teaching value | Meaning to preserve |
|---|---|---|
| Period A | 10 units | Known value at the start of the example. |
| Period B | 0 units | An actually observed zero, retained in the table. |
| Period C | Unknown | No observed value; do not replace with zero. |
| Period D | 15 units | Last known value; it does not prove continuous growth. |
- W3C WAI : Complex images
Consulted on 22 October 2026; short description and textual representation of essential chart information.
- W3C WCAG 2.2 : Use of Color
Consulted on 22 October 2026; visual information in addition to color. Table values are fictitious.
Test colours, scales and screens
Do not rely on colour alone to distinguish series. Add labels, patterns or markers and check contrast. On a phone, verify axes and values without demanding constant horizontal zoom.
A table needs headers associated with cells even when the layout narrows. If a mobile chart is simplified, do not remove an essential series. The accessibility guide suggests keyboard and zoom checks.
Do not confuse label contrast with graphical contrast. WCAG 1.4.11 requires 3:1, under its conditions and exceptions, for graphic parts needed to understand content against adjacent colours. This does not automatically lower ordinary text requirements to 3:1; text keeps its own check. Grey #777777 on white can therefore exceed 3:1 while missing 4.5:1. Record what the element identifies before choosing the test.
In the teaching diagram, A uses a solid line and circles; B a dashed line and squares. Both use the same colour and carry their letter, so the legend can be matched without identifying a hue. The diagram illustrates markers, not measured data. For a real chart, also retain values and descriptions outside the image. A greyscale view helps reveal colour dependence but replaces neither contrast calculation nor other reading checks.
- Series distinct without colour.
- Axes readable on mobile.
- Table headers understandable.
Scroll the table horizontally to read every column. With a keyboard, focus the table area and use the arrow keys.
| Element | Visible cue | Check |
|---|---|---|
| Teaching series A | Solid line, circles and letter A | Identifiable without colour |
| Teaching series B | Dashed line, squares and letter B | Distinct from A without recognising hue |
| Axis and label text | Text contrast check | Do not automatically apply graphic thresholds to text |
| Necessary graphic part | Contrast against adjacent colours | Apply 1.4.11 for its purpose and exceptions |
Verify numbers over time
Name the source, collection date, method and owner. When data changes, check title, conclusion, table and translations. A chart image may remain in an article after the underlying data is corrected.
Review any downloads too: reusable format, column names and absence of data that should not be public. A clear figure cannot redeem a faulty calculation; have values reviewed before release.
- Source and calculation reviewed.
- Copies and translations updated.
- Downloads checked.
Keep the denominator beside a percentage
Give counts, population and period beside the chart. Missing data remains distinct from zero. For before/after comparisons, retain the same units and explain collection changes; a taller bar alone cannot establish improvement.
Reference documents
- W3C advice on complex images · Source consulted
- W3C : Understanding 1.4.11 Non-text Contrast · Source consulted
- W3C : Understanding 1.4.1 Use of Color · Source consulted
- W3C : G111 Using color and pattern · Source consulted
Content updated on
Documented reference points for this topic
| Reference | Value or syntax | Scope |
|---|---|---|
| WCAG 2.2 · 1.4.3 | 4.5:1 / 3:1 | Normal / large text (18 pt or 14 pt bold); criterion exceptions apply. |
| WCAG 2.2 · 1.4.10 | 320 CSS px | Vertical content without two-dimensional scrolling; exceptions cover inherently two-dimensional content. |
Dates indicate when references were consulted. These facts are neither a site audit nor an overall compliance statement.