WCAG 1.4.3 Contrast

Normal text needs 4.5:1, large text 3:1. Aim for AAA (7:1) on body when feasible.

How to apply it

Use a contrast checker on every text/background combo before shipping.

WCAG 1.4.3 Contrast in practice: a concrete example

Where the 4.5:1 line actually falls

Success Criterion 1.4.3 sets the AA contrast floor: 4.5:1 for normal text, and a looser 3:1 for large text, defined as at least 18.66px bold or 24px regular. That large-text carve-out is the part people miss: a big heading can pass at a ratio that would fail on body copy. A contrast checker gives the exact number for a given text-and-background pair, so this stops being a judgment call and becomes a measurement you either meet or fix.

Common WCAG 1.4.3 Contrast mistakes

Applying the 4.5:1 body threshold to a large heading (over-correcting), or the 3:1 large-text threshold to small body copy (under-correcting).
Checking against the page background while the text actually sits on a tinted card, an image, or a gradient where the ratio changes.
Stopping at AA when body text can often reach AAA (7:1) with a small tweak, which reads far better in bright light.

When WCAG 1.4.3 Contrast doesn't apply

1.4.3 exempts genuinely incidental content: disabled controls, purely decorative text, and text that is part of a logo or brand name. It also doesn't govern non-text elements like icons and borders, which fall under 1.4.11. Anything that conveys meaning as readable text is in scope, so “it's only a caption” almost never qualifies.

Practise it on a real challenge

Product Card — the caption that vanishes in sunlight

A product card's caption is a tasteful light grey on white — crisp in Figma, gone the instant it's read outdoors or by low-vision eyes. It just failed an accessibility audit.

WCAG 1.4.3 Contrast

How to apply it