Rule library Colour

Elements must meet minimum color contrast ratio thresholds

color-contrastWCAG 2.0 AA

Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds

Who this affects

Text does not meet the 4.5:1 contrast minimum. Users with low vision, and anyone on a phone in daylight, cannot read it.

How to fix it

Darken the foreground or lighten the background until the ratio reaches 4.5:1 (3:1 for text 18pt and above). This is usually a design-token change.

Effort Medium · ~2-4 h for a design system pass

Before and after

Fails

/* 3.1:1 against white — fails */
.price-note { color: #949494; background: #fff; }

Passes

/* 4.6:1 against white — passes */
.price-note { color: #6b6b6b; background: #fff; }

Where this sits in the standard

WCAG success criterionLevelEN 301 549 clause
1.4.3 Contrast (Minimum)AA301-549, 9.1.4.3

EN 301 549 clause 9 applies these criteria to web content. The published version referenced by the European Accessibility Act is V3.2.1, which incorporates WCAG 2.1 level A and AA. More on the standard.

How to check it by hand

Sample the foreground and background with a contrast checker and compare against 4.5:1, or 3:1 for text at 18pt and above or 14pt bold. Check hover, focus and disabled states too — they are the ones usually missed.

Automated testing settles roughly a third of the WCAG success criteria. This rule is one an automated tool detects reliably — but a clean automated result is not proof of conformance.

Reference

Deque's technical write-up for this rule: color-contrast

See whether your site trips this rule

Paste a URL. We open it in a real browser, dismiss the cookie wall and run the full EN 301 549 rule set. No account, no card.

Run a free scan All rules