WCAG Color Contrast Ratio Calculator
Compute the WCAG 2.1 relative contrast ratio between a foreground and background colour and check AA and AAA compliance for normal and large text.
How to Use the WCAG Color Contrast Ratio Calculator
- Enter the foreground colour as a hex code (#rrggbb).
- Enter the background colour as a hex code.
- Click Calculate to see the contrast ratio and AA/AAA verdicts.
Anwendungsfälle
- •Design-token review during branding.
- •Accessibility audits of existing UIs.
- •Checking text-over-image compositions.
Formel
Ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter and L2 the darker relative luminance. Simplified luminance: 0.2126·R + 0.7152·G + 0.0722·B on a 0–1 sRGB scale.
Häufig gestellte Fragen
Why is AA the minimum?
WCAG 2.1 level AA is the target most regulators adopt (EN 301 549, Section 508, ADA case law). AAA is an ideal for long-form reading material.
What counts as large text?
Large text is at least 18 pt (24 px) regular, or 14 pt (18.66 px) bold. Everything else is normal text and must meet 4.5:1.
Is the simplified luminance WCAG-accurate?
For most sRGB pairs it rounds to the same pass/fail verdict as the full formula. For edge cases around the threshold, cross-check with the official WCAG formula or APCA for new projects.