WCAG colour contrast checker
Pick two colours. We compute the WCAG 2.x contrast ratio and tell you whether it passes AA or AAA for normal text, large text, and non-text UI components — with a one-click suggested fix when it doesn't.
Body copy
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Accessible colour contrast keeps reading effort low.
Heading at 24pt+
Caption / small label text
Contrast ratio is computed using the WCAG 2.x relative-luminance formula on sRGB values. Large text means ≥ 18pt regular or ≥ 14pt bold (roughly 24px / 18.67px in CSS). See the WCAG 2.2 success criteria.
The WCAG contrast thresholds
Five thresholds matter for EU accessibility work. They map directly onto the audit findings AccessiProof produces and onto the EN 301 549 conformance bar referenced by the European Accessibility Act.
| Criterion | Applies to | Ratio |
|---|---|---|
| 1.4.3 AA | Normal text (<18pt regular / 14pt bold) | ≥ 4.5:1 |
| 1.4.3 AA | Large text (≥18pt regular / 14pt bold) | ≥ 3:1 |
| 1.4.6 AAA | Normal text | ≥ 7:1 |
| 1.4.6 AAA | Large text | ≥ 4.5:1 |
| 1.4.11 AA | UI components & graphics | ≥ 3:1 |
Why this matters for EAA compliance
Insufficient colour contrast is the single most common accessibility failure we see in agency audit work. It's cheap to fix at design time, expensive to remediate post- launch, and easy to spot in regulatory complaints — which makes it a high-priority finding under the European Accessibility Act, BFSG, RGAA, Ley 11/2023, and Legea 232/2022 enforcement.
When this tool flags a fail, the fix lives in your design system, not in HTML. Update the token, ship a single PR, close dozens of audit findings at once. That's the work compression agencies look for when accessibility moves from one-off project to retainer.
This contrast checker is provided free for accessibility evaluation. Results are computed locally in your browser using the WCAG 2.x relative-luminance formula. AccessiProof does not log or store the colours you test.