TOOLS
Color Contrast Checker
Check foreground and background colours against WCAG AA and AAA.
ACCESSIBILITY CHECK
Contrast preview
| AA normal | |
| AA large | |
| AAA normal | |
| AAA large |
The calculation runs locally in your browser. Treat it as one part of an accessibility review.
Color contrast checker guide
Check foreground and background colours against common WCAG contrast thresholds and preview the pairing.
The calculation is local. Treat the result as one part of an accessibility review, not a complete pass/fail for an interface.
Understanding the ratio
The ratio compares relative luminance from 1:1 to 21:1. Higher contrast generally improves text distinction, while the required threshold depends on text size and the conformance target.
AA and AAA results
AA normal text commonly uses 4.5:1, AA large text 3:1, AAA normal text 7:1, and AAA large text 4.5:1. “Large” has a specific WCAG meaning based on size and weight.
Check more than colour
- Test body text, controls, placeholders, focus indicators, icons, and disabled states.
- Do not communicate status through colour alone.
- Check real fonts, weights, anti-aliasing, themes, and contrast over images.
Tip: A colour pair can pass this calculation while the design still fails keyboard, focus, zoom, or non-colour accessibility needs.
Frequently asked questions
What does WCAG AA mean?
AA is a commonly used WCAG conformance level with contrast targets that vary by text size and weight.
Does passing contrast guarantee accessibility?
No. It checks colour contrast only; complete accessibility requires broader testing.
Why can a colour look readable but fail?
Perceived readability varies by display, font, size, and surrounding colours. The ratio is a repeatable luminance-based check.
Privacy note: contrast calculations happen in your browser. Your colours are not uploaded.