Three contrast numbers to remember

What it is for

Pale gray text on white is the most common accessibility failure in infographics, and the fix is a number you can check. This sheet puts the three ratios from the Web Content Accessibility Guidelines next to real samples so you can see what each threshold looks like.

The numbers

• 4.5:1 for normal text (WCAG 1.4.3, level AA). This covers body copy, labels, source lines and footnotes.
• 3:1 for large text, which WCAG defines as at least 18 point, or 14 point bold. The same 3:1 applies to graphical objects people need to understand the content, such as bars, lines, icons and chart outlines (WCAG 1.4.11).
• 7:1 for normal text at the enhanced level (WCAG 1.4.6, level AAA). Few sites aim for AAA everywhere, but it is a good target for long passages of small text.

Real samples

Each swatch was computed with the WCAG contrast formula against pure white (#FFFFFF). #767676 comes out at 4.54:1, which is why it is the lightest gray designers usually quote as safe for body text. #949494 reaches 3.03:1, enough for large type and chart marks but not for small labels. #C4C4C4 is only 1.75:1 and fails both.

The samples sit on a fixed white card even when the rest of this site is in dark mode. A ratio is a property of two colors, so the card keeps the background the numbers were measured against.

Design choices

• The card is a list, not a chart. There is no trend or comparison to plot, just thresholds to look up, so a stacked list reads fastest.
• Each row shows the swatch, the sample text in that color, the measured ratio and what the color is allowed for. The ratio is printed right next to the sample, so readers don't have to match them up.
• The five steps at the bottom turn the reference into a procedure.

Where it applies

WCAG was written for web content, but the same ratios are a sensible floor for print and slides. Contrast on paper also depends on the stock, the ink and the light in the room, so leave some margin above the minimum.