Contrast Checker

Key features

• Contrast ratio computed with the official WCAG 2.1 relative-luminance formula, shown as X.XX:1 with a plain-English verdict.
• Pass/fail badges for all four criteria: AA normal (4.5:1), AA large (3:1), AAA normal (7:1) and AAA large (4.5:1).
• Quick fix button that searches lightness for the nearest AA-passing version of your foreground color.
• Live preview rendering 16px regular and 24px bold sample text in your exact colors.
• Native color pickers plus validated hex inputs, with one-click swap and three preset pairs.
• RGB breakdown tiles for both colors alongside the verdict.

How it works

1. 1

   Enter your colors

   Set the foreground (text) and background with the swatches or hex fields. The ratio recalculates on every change.

2. 2

   Read the verdict

   The big number shows the ratio, and the four badges tell you exactly which WCAG levels pass for normal and large text.

3. 3

   Check the preview

   Sample text renders in your real colors so you can judge readability as a reader would, not just as a number.

4. 4

   Fix failures

   If AA for normal text fails, the Quick fix button appears: it keeps your hue and saturation and moves lightness to the nearest value that clears 4.5:1.

Tips for better results

• 💡Remember the large-text exception: 3:1 is enough only for text that's at least 24px regular or roughly 19px bold.
• 💡Quick fix only adjusts lightness — if the result feels washed out, tweak saturation manually and re-check.
• 💡The ratio is order-independent, but use Swap to double-check how a reversed pair (e.g. a button's hover state) reads.
• 💡Don't forget muted text — the faint 80%-opacity line in the preview is often the first place contrast dies.
• 💡If Quick fix reports no passing lightness, your background is too mid-tone for that hue — try lightening or darkening the background itself.

Frequently asked questions