Loading page
Pick a foreground and background color to check WCAG 2 contrast at a glance: the exact ratio, AA/AAA pass-fail for large and small text, live previews, a color-blindness simulation, and a suggested fix when the pair falls short.
Large text preview — 24px bold
Small text preview at 14px — the quick brown fox jumps over the lazy dog. This is the size most body copy uses, so it needs the stricter AA normal-text threshold of 4.5:1 to stay readable.
14.63:1
AAAThis pair already meets AAA for normal text — no changes needed.
Protanopia
Red-blind (~1% of men)
Deuteranopia
Green-blind (~1% of men, the most common form)
Tritanopia
Blue-blind (rare, <0.01% of people)
Achromatopsia
Total color blindness (very rare)
Checking one pair at a time only gets you so far — add a whole palette and see every color-against-color ratio at once.
| Color | #1e293b | #ffffff | #f8fafc | #0f172a |
|---|---|---|---|---|
| #1e293b | — | 14.63 | 13.98 | 1.22 |
| #ffffff | 14.63 | — | 1.05 | 17.85 |
| #f8fafc | 13.98 | 1.05 | — | 17.06 |
| #0f172a | 1.22 | 17.85 | 17.06 | — |
Green meets AA (4.5:1+) for normal text, amber meets AA only for large text (3:1+), red fails both. Hover a cell for the exact ratio and grade.