Colour Contrast Checker
Measures the contrast ratio between a foreground and background colour and checks it against the WCAG accessibility thresholds. Ratios run from 1:1 (identical) to 21:1 (black on white).
Free, no signupRuns entirely in your browser
Input
Result
- Contrast Ratio
- 3.76 : 1
- WCAG Normal Text AA (>= 4.5:1)
- FAIL
- WCAG Normal Text AAA (>= 7.0:1)
- FAIL
- WCAG Large Text AA (>= 3.0:1)
- PASS
- WCAG Large Text AAA (>= 4.5:1)
- FAIL
- Foreground Color
- #ffffff
- Background Color
- #ef4444
About
What the Colour Contrast Checker does
The thresholds that matter: 4.5:1 is the AA minimum for normal body text, 3:1 is acceptable for large text (18pt, or 14pt bold), and 7:1 meets the stricter AAA level. Low contrast is one of the most common accessibility failures on the web, and it affects far more people than is usually assumed — including anyone reading on a phone in daylight.
How it works
Using the Colour Contrast Checker
- 1Choose your foreground (text) colour.
- 2Choose the background colour behind it.
- 3The relative luminance of each is calculated using the WCAG formula.
- 4The ratio is computed from the lighter and darker luminance values.
- 5The result is checked against the AA and AAA thresholds for normal and large text.
Use cases
What people use it for
- Verifying body text meets accessibility requirements
- Checking button label contrast against its background
- Auditing a brand palette before building a design system
- Fixing a failure flagged by an accessibility audit
FAQ
Frequently asked questions
6 related
All tools →