The Analyst's Path

WCAG contrast ratio

The Web Content Accessibility Guidelines set two numbers that matter for charts. Normal-size text needs a contrast ratio of at least 4.5 to 1 against its background. Graphical objects that convey information, which covers a bar, a line, a marker and a reference rule, need at least 3 to 1. Contrast ratio comes from relative luminance. How different two colours look doesn't enter into it.

4 min readPart of Decluttering and Focus: Data-Ink, Pre-attentive Attributes, ColourOpen in course mode

Advertisement

Think of an accessibility check as a proxy. It tells you whether a reader can see the mark you're relying on from the back of a room, on a dim projector, or on a phone in daylight. The threshold happens to be written down, which makes it testable. And the same test protects the reader with normal vision in a bad room.

What does WCAG require, and how is the ratio worked out?

The Web Content Accessibility Guidelines set two numbers that matter for charts. Normal-size text needs a contrast ratio of at least 4.5 to 1 against its background. Graphical objects that convey information, which covers a bar, a line, a marker and a reference rule, need at least 3 to 1. Large text, meaning about 18 point or 14 point bold, drops to 3 to 1 as well. These are the WCAG 2.2 figures, checked September 2026. Verify them against the current recommendation at w3.org, since the version advances and the success criteria can be renumbered.

Contrast ratio comes from relative luminance. How different two colours look doesn't enter into it. Convert each channel from sRGB to linear, weight them 0.2126 red, 0.7152 green and 0.0722 blue, and form (L_lighter + 0.05) / (L_darker + 0.05). Because of the green weight, a saturated yellow fails against white far more often than you'd expect. Yellow is bright, and brightness against a bright page is the definition of low contrast.

Advertisement

Worked example: checking a palette in both themes

Run the house pair through it, in both themes.

PairRatioThresholdVerdict
Body ink #16233A on white15.72 : 14.5pass
Body text #E6E9EE on night #10141815.20 : 14.5pass
Accent #1F6FEB mark on white4.63 : 13.0pass
Accent #1F6FEB mark on night3.99 : 13.0pass
Dark-theme accent #6FA8FF on night7.68 : 13.0pass
Light-theme neutral #C4CAD2 mark on white1.65 : 13.0fail
Dark-theme neutral #3C4450 mark on night1.88 : 13.0fail
Accent against neutral, light theme2.81 : 13.0fail

Three of those rows deserve attention.

The neutral fails the 3 to 1 non-text minimum in both themes, and that's deliberate. It isn't an oversight. Context marks don't convey information the reader must decode. They're the field the accent stands out from, and their values are in the labels and in the appendix table. If a context series does carry information a reader must read, it's no longer context and it needs to pass. Say which of the two you mean in the slide's notes, and you can defend the choice.

The accent-against-neutral row, failing at 2.81 to 1, is the one that surprises people. Two marks can each pass against the background and still be hard to tell apart from each other. Adjacent-mark contrast is a separate check. The guidelines don't require it, but your reader does. Where two series touch, as in a stacked bar, run the check between them as well.

The theme row is the practical trap. An accent chosen against a white page at 4.63 to 1 drops to 3.99 to 1 on a dark background. That still passes, but a slightly darker blue wouldn't. Going the other way is worse. The dark-theme accent at 7.68 to 1 on night falls to 2.41 to 1 on white and fails outright. One accent value usually can't serve both themes, so a house palette carries two. If a deck is going onto an unknown projector, build it and check it in the theme it'll actually be shown in.

Advertisement

Part of the course

This page is part of Decluttering and Focus: Data-Ink, Pre-attentive Attributes, Colour (PR2.02), in Phase 2: Financial statement analysis and quality of earnings. The module's flashcards and its quiz are in the app.