About one in twelve men and one in two hundred women have some form of colour vision deficiency. A report whose series differ only by red and green is unreadable for them, and a pale series on white is hard for everyone. The A11y section checks your theme for both, and fixes most problems in one click.
See the report through other eyes
Open A11y in Report Design Studio. Colour blindness simulation shows the whole live preview as it looks with:
| Simulation | What changes |
|---|---|
| Protanopia | Reds are hard to see and look dark |
| Deuteranopia | Reds and greens look alike (the most common form) |
| Tritanopia | Blues and greens, and yellows and pinks, look alike |
| Greyscale | No colour at all, like a black and white print |
The bar above the preview names the simulation that is on; ✕ Reset goes back to normal. Look at each chart: can you still tell every series apart?
Check contrast on the visuals
Contrast on visuals measures each colour against its visual's background. Chart marks (bars, lines, slices) are graphical objects, so the WCAG rule for them, 1.4.11, asks for a contrast of at least 3:1. Each colour is graded Pass or Low.
Two extra measures sit alongside: the APCA Lc value, a newer way of measuring contrast, and a grey AA or AAA tag for the stricter text levels. Those matter for colours you also use for text.
Check the background
Background readability checks body text against the canvas in the preview. If a tinted background makes text hard to read, Fix to AA or Boost to AAA eases the tint until it is readable; once the canvas already passes, the buttons rest.
Find colours that look alike
Palette diagnostics has two views:
- A distinctness matrix compares every pair of colours and flags pairs that are confusable, taking the worst case across normal and colour-blind vision
- Perceived lightness bars show whether the palette is balanced, or whether several colours have the same lightness (which makes them merge in greyscale)
Fix a flagged pair by changing one of the two colours in Build, or by moving one of them further down the palette where it is used less.
Fix contrast automatically
Auto-fix contrast raises every colour to a stricter text grade, Fix to AA (4.5:1) or Boost to AAA (7:1), by nudging its lightness while keeping the series as distinct as possible, and applies the result. Its Undo brings your original colours back in one step.
Do not rely on colour alone
A theme can make colours distinct, but some things belong in the report itself: label lines directly instead of relying on a legend, and use data labels on key values. Colour should support the meaning, not carry it alone.
The next lesson designs the page behind the visuals: a report background.