This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung →

Checking colour contrast: 4.5:1, 3:1, and what else counts

Normal text needs a contrast ratio of at least 4.5:1 against its background; large text and the outlines of controls need at least 3:1. On top of that come requirements for zoom (up to 200% with no loss of information), reflow (usable at 320px width), and text spacing. Colour alone may never be the only piece of information.

Contrast is one of the few criteria that's fully calculable — and still the most common finding. The reason is usually the same spot: a light brand colour on a white area, or text with reduced opacity. Opacity lowers contrast without it showing in the colour value.
Reflow at 320px is the requirement that trips up classic table layouts: at this width, no horizontal scrolling should be necessary to read content. Content that genuinely needs it is exempt — complex data tables and maps, say.
"Colour alone" is the classic case with required fields and charts: a field with a red outline and no text tells a colour-blind user nothing. It needs a second marker — an icon, a label, or text.

Deutsche Fassung — mit allen Prüfpunkten dieses Themas

FAQ

How do I calculate the contrast ratio?

From the relative luminance of both colours; the result falls between 1:1 (same colour) and 21:1 (black on white). You don't have to calculate it yourself — every contrast tool, and our check, deliver the value along with the location.

From what point does text count as "large"?

From 18 point, or from 14 point if bold. For these sizes, 3:1 is enough instead of 4.5:1. The lower value applies only to the text itself, not to icons next to it.

Why does our text fail, even though the colour is right?

Often because of opacity: text with an opacity under 1 blends with the background, and the actual contrast is lower than the one calculated from the pure colour. Semi-transparent overlays on images work the same way.

Does the contrast value also apply to controls?

Yes — for the parts you need to recognise to operate the page: field outlines, toggle states, focus outlines, chart lines. 3:1 applies there. Purely decorative elements are exempt.