The quick brown fox jumps over the lazy dog
Pack my box with five dozen liquor jugs. Good design is readable design — check your palette before you ship.
“Fix” adjusts the text color’s lightness just enough to pass, keeping your hue.
Try an accessible pair
What is color contrast ratio?
The contrast ratio measures how distinguishable text is from its background, from 1:1 (same color) to 21:1 (black on white). It is calculated from the relative luminance of both colors:
ratio = (Llighter + 0.05) / (Ldarker + 0.05)
WCAG 2.2 contrast requirements
| Level | Normal text | Large text* |
|---|---|---|
| AA (standard) | ≥ 4.5 : 1 | ≥ 3 : 1 |
| AAA (enhanced) | ≥ 7 : 1 | ≥ 4.5 : 1 |
* Large text = 18pt (24px) or larger, or 14pt (18.66px) bold or larger.
How to use this checker
- Pick a text color and a background color (type a hex code or use the picker).
- Read the ratio and the AA / AAA pass–fail badges instantly.
- Preview how real headings, body text and buttons look.
- If it fails, hit Fix to pass AA/AAA — we nudge the lightness until it passes, hue untouched.
- Copy the CSS and ship accessible UI.
FAQ
What is a good color contrast ratio?
WCAG 2.2 requires at least 4.5:1 for normal text (AA) and 7:1 for AAA. Large text needs 3:1 (AA) / 4.5:1 (AAA).
How is the contrast ratio calculated?
From the relative luminance of each color: ratio = (L1 + 0.05) / (L2 + 0.05), with sRGB gamma correction exactly as WCAG defines it.
What is the difference between AA and AAA?
AA is the compliance level most laws and policies reference. AAA is stricter. ContrastLab grades both, for normal and large text.
Is this checker free?
Yes — free forever, no account, runs 100% in your browser. Your colors never leave your device.