Color Contrast Checker
Know which text your visitors actually read — WCAG AA and AAA ratios for every color pair, computed instantly in your browser.
What this tool gives you
Check color pairs
Paste one text/background pair per line. Analysis runs locally in your browser — nothing is sent anywhere.
Hex and rgb()/rgba() work. Use on, /, a comma, CSS declarations, or two tokens on a line.
What this checker looks for
WCAG 2.1 AA is the practical target. Readability drives dwell time, and low contrast punishes mobile readers the most.
AA 4.5:1
Minimum for body text (WCAG AA).
AA 3:1
Minimum for large text — 18px regular or 14px bold.
AAA 7:1
Stretch goal that also covers small captions.
Real luminance
Ratios computed from sRGB relative luminance, not guesswork.
How to use the checker
List your palette pairs, then fix the lowest ratios first.
Paste the pairs
One text/background pair per line in hex or rgb() form.
Read the ratios
4.5:1 covers body text, 3:1 covers large headings.
Push the failing pairs
Darken text or lighten the background until the level flips green.
WCAG contrast thresholds
The official numbers, applied to every pair you paste.
| Use case | Minimum ratio | Why it matters |
|---|---|---|
| Body text (AA) | 4.5:1 | The legal baseline for readable pages. |
| Large text (AA) | 3:1 | Headings and buttons at 18px+ get a lower bar. |
| AAA text | 7:1 | Covers low-vision readers and small captions. |
| UI components | 3:1 | Borders and icons need contrast too. |
| Pure black on white | 21:1 | The ceiling — rarely needed, always safe. |
Related GEO pages
Fix contrast, then check labels, alt text and heading structure.
Contrast FAQs
What contrast ratio does WCAG require?
Level AA needs 4.5:1 for normal body text and 3:1 for large text (18px regular or 14px bold). Level AAA raises those to 7:1 and 4.5:1.
Does low contrast affect SEO?
Indirectly. Unreadable text drives bounces and kills dwell time, and accessibility gaps expose you to ADA complaints. Search engines reward pages real users can read.
Is this tool sent to a server?
No. Ratios are computed from sRGB relative luminance in your browser. Your palette never leaves the page.