Color Contrast Checker
Check color contrast for WCAG AA and AAA compliance. Live preview, hex and rgb support, instant pass/fail across 5 levels. Free, in-browser.
What this does
Calculates the contrast ratio between two colors using the WCAG 2.1 algorithm and tells you which accessibility levels pass for which text sizes. Live preview shows the actual rendered look at the chosen colors.
The five thresholds, decoded
WCAG (Web Content Accessibility Guidelines) defines two compliance levels — AA (the legal minimum in most jurisdictions) and AAA (the higher bar for content where accessibility matters most, like government and healthcare).
| Combination | Threshold | What it means |
|---|---|---|
| AA — normal text | 4.5:1 | Body copy, default UI text. Most sites must hit this. |
| AA — large text | 3.0:1 | Text ≥ 18pt, or ≥ 14pt bold. Headlines and CTAs can be lower contrast. |
| AAA — normal text | 7.0:1 | The high bar. Government sites and accessibility-first products. |
| AAA — large text | 4.5:1 | Same as AA normal. |
| AA — UI components | 3.0:1 | Borders, icons, focus rings. Often forgotten. |
The 4.5:1 threshold for normal text is calibrated to be readable by users with 20/40 vision (the typical correctable threshold) without assistive tech. AAA’s 7:1 is for users with worse-than-correctable vision.
How to read the contrast ratio
The ratio is (L1 + 0.05) / (L2 + 0.05) where L is relative luminance. White on black is 21:1 (the maximum). Same-color text is 1:1 (invisible).
Some real-world reference points:
| Pair | Ratio | What passes |
|---|---|---|
#000000 on #FFFFFF | 21:1 | Everything. The textbook safe pair. |
#1F2937 on #FFFFFF | 14.7:1 | Everything. Common dark-on-white body text. |
#7C3AED on #FFFFFF | 5.7:1 | AA normal, AA large, AAA large. Not AAA normal. |
#7C3AED on #F8FAFC | 5.4:1 | Same as above. The slightly off-white doesn’t help. |
#94A3B8 on #FFFFFF | 3.4:1 | AA large only. Not for body copy. |
#FFFFFF on #7C3AED | 5.7:1 | Inverse passes the same way. |
Common mistakes this tool catches
- Light grey body text on white. Pretty in mockups, fails AA.
#888888on white is 3.5:1 — fails for body. - Brand color on its own tinted background. A pale-purple page with a purple CTA — the CTA fails contrast against the page tint, even if it passes against pure white.
- Disabled state too dim. Designers often set disabled text to 30-40% opacity. Computed against the page background, this often falls below 3:1 — fails the UI components rule.
- White-on-yellow warning labels. Yellow’s relative luminance is high.
#FFFFFFon#EAB308is 1.9:1 — the warning text is unreadable.
What this tool does NOT cover
- Color blindness — contrast ratio passes don’t guarantee distinguishability for protanopia/deuteranopia/tritanopia. Test separately with a CVD simulator.
- Multi-layer transparency — if your text is on a semi-transparent layer over a background, plug in the computed color, not the layer’s RGBA.
- Animated/changing backgrounds — test against the worst-case frame, not the average.
- WCAG 3 (APCA) — the new perceptual algorithm in development. Not yet a compliance requirement; this tool uses WCAG 2.1.
Privacy
Runs entirely in your browser. No color data leaves your machine.