Color Contrast Checker
Calculate WCAG contrast ratio with AA/AAA pass/fail for normal and large text at once. Swap colors and preview live. Everything stays in your browser.
Examples (click to try)
Normal text — contrast is a readability baseline.
Large text (bold)
—
Contrast ratio
—
| Normal | Large | |
|---|---|---|
| AA | — | — |
| AAA | — | — |
How to Use the Color Contrast Checker
Set foreground and background colors or pick an example chip. Ratio, AA/AAA results, and the preview update together. Use swap to flip colors and see how each direction reads.
Examples
- #777 on #fff → 4.48:1 / normal AA ✗ (below 4.5) / large AA ✓
- #000 on #fff → 21:1 / normal & large AAA ✓
- #ea6379 on #fff → 3.20:1 / normal AA ✗ / large AA ✓ (brand color as body text needs care)
- #fff on #2d2a32 → 14.11:1 / normal & large AAA ✓ (dark UI)
When to Check Contrast
- Choosing text and background colors for buttons, cards, alerts and navigation.
- Checking brand colors before using them as body text.
- Reviewing dark-mode color pairs where low contrast is easy to miss.
FAQ
Is my data sent to a server?
No. All calculations run in your browser; nothing is transmitted or stored externally.
What's AA vs AAA?
Normal text: 4.5:1 for AA, 7:1 for AAA. Large text: 3:1 for AA, 4.5:1 for AAA. AAA targets stronger readability for more users.
What counts as large text?
WCAG defines large text as 18pt (about 24px) regular weight, or 14pt (about 18.5px) bold. Thresholds are lower than for normal body text.
Does swapping foreground and background change the ratio?
The contrast ratio stays the same — only the relative luminance pairing matters. Use the swap button to preview how each direction looks in a real UI.