Colour Contrast Checker
Check a colour pair, see how it reads, and find a passing alternative.
Calculated on your device · No uploadsYour colours
Use 3-digit or 6-digit HEX, such as #FFF or #17664D. The background is opaque.
Opacity always applies to the foreground, including after swapping.
See the difference
Make your words easy to read.
—
The displayed ratio is rounded. Every pass/fail decision uses the full calculation.
| Use | Threshold | Result |
|---|---|---|
| Normal text AA | 4.5:1 | — |
| Large text AA | 3:1 | — |
| Normal text AAA | 7:1 | — |
| Large text AAA | 4.5:1 | — |
| Relevant graphics / UI | 3:1 | — |
Suggested foreground colours
What these results mean
Large text is at least 18pt (24 CSS pixels), or 14pt bold (about 18.67 CSS pixels). Normal text AA needs 4.5:1; large text AA needs 3:1. AAA text thresholds are higher. Non-text contrast applies to relevant identifying parts of controls and graphics, with exceptions; it is not a blanket test for every shape.
This checks a single sRGB colour pair over a solid background. Translucent foreground colours are blended over that background before calculation. Photos, gradients, multiple adjacent colours, thin fonts and rendering differences need further review. A passing pair is not full WCAG conformance.
Alternatives mix the foreground toward black or white while preserving its opacity and the background. They are suggestions, not guaranteed perceptually closest colours. Review your brand and actual design before applying.