a11y.world Accessibility, practiced.

Field Notes

Charts that still read when printed in grey

A chart passes when it still carries its message on a grayscale printer. That means three lightness levels, not three hues; dash and shape before pattern; and labels on the data instead of a legend. This is the rule every chart on this site follows, written down.

Published

  • color
  • charts
  • data visualization

Print a chart on a grayscale printer. If you can still tell the lines apart and still find which one is which, it works. If three lines have become one grey, it never worked; it only looked like it worked on a colour screen for people who see hue the way the designer does. Every chart on this site is built to pass that test, and the rule is short enough to write down.

Hue is not a difference

Three colours from a popular colour-blind-safe palette, an orange, a sky blue, and a green, were chosen to be told apart by people with the common colour vision deficiencies. In grayscale their pairwise contrast is 1.02:1, 1.52:1, and 1.48:1. In grey they are one colour. The palette does its job for the people it was designed for and nothing for a printer, a photocopy, a phone in sunlight, or a reader who simply does not read hue well.

The same three-line chart drawn two ways, with the grey version of each Left: three lines in orange, sky blue, and green, then the same three lines in grayscale, where all three are the same mid grey and cannot be told apart. Right: the same three lines in dark, mid, and light grey with the mid line dashed and a label at the end of each, which read the same in colour and in grey. Three hues Three lightness levels, one dash, labels The same, printed in grey The same, printed in grey SalesReturnsVisits SalesReturnsVisits Which line is which?
Left, three hues that become one grey. Right, three lightness levels with a dash on the middle one and a name at the end of each line. The right-hand pair looks the same in colour and in grey, which is the point.

The rule

  1. Lightness carries the difference. Any two things a reader must tell apart differ by at least 3:1 in contrast. Hue can sit on top of that. It is never the difference by itself.
  2. Three levels per figure. Dark, mid, light. Three series get three levels. A fourth series reuses the dark level with a dash (for lines) or one hatch pattern (for areas). Five or more series want small multiples or a table, not a fifth colour.
  3. Label the data, not a legend. Names at the end of lines, values on bars, names on slices. A legend is a lookup; a label is an answer. Use a legend only when labels cannot fit.
  4. One channel beyond lightness, at most. Direct label first, then lightness, then dash or marker shape, then pattern, and stop at the first that works. A figure with hue, hatch, dash, and marker on every series is the figure nobody can read.
  5. Status gets a word. Pass, fail, at risk. Red, amber, and green never stand alone, and neither do five border styles. One word, one glyph, and the one accent hue may mark the single status that needs action.
  6. Numbers under the picture. A chart that carries a decision carries its table too.

Here are the three grey levels this site uses on white, with their measured contrast.

Level Hex Against dark Against light
Dark #1a1a1a 11.2:1
Mid #6e6e6e 3.4:1 3.3:1
Light #cfcfcf 11.2:1

Every pair clears 3:1, so every pair survives a printer. A hue can replace any one of them at the same lightness: a rust for the mid level, a sand for the light, as long as the lightness stays where it is.

How to check

Switch the view to grayscale and look. The Color Lab has that view for a whole palette: every swatch and every ratio recomputed with hue removed. A pair that only differs in hue collapses to one cell. On a page, the same check is a screenshot run through a grayscale filter, or a print preview in black and white. Do it before shipping, not after the complaint.

The charts in these notes are drawn in currentColor with opacity for the levels, so they pass in the light theme, the dark theme, and in grey, with one drawing.

Try it

Open the Color Lab, load this site's light palette, and set "View as" to grayscale. Count the pairs that fall below 3:1 compared with the typical view. Then paste your own chart colours into the intake box and do the same.

Sources

  • w3.org, Understanding Success Criterion 1.4.11: Non-text Contrast, the 3:1 floor for graphical objects
  • w3.org, Understanding Success Criterion 1.4.1: Use of Color

Open the companion lab

  • Fix a failing color with the smallest move

    A color fails contrast and you want to change it as little as possible. There are two short paths, lightness alone and a mix toward black or white. They often end at the same place, and when they do not, the difference is hue. Here is how far each one travels, with numbers.

  • Build a palette that passes every pair

    Not every pair in a palette has to pass. Every pair you use has to. Here is how to build a palette where the allowed pairs are obvious and the forbidden ones are hard to reach for.

  • Color is never the only signal

    Red for error, green for success, blue for links. Take the color away and ask what is left. If the answer is nothing, the state was never communicated.

Spotted something this note gets wrong?

Corrections and better examples are the best kind of message.

Send a correction