Free Tool
Color Contrast Checker
Check if your website color combination meets WCAG 2.1/2.2 standards.
Contrast Ratio
6.29:1
Preview
Sample text on your background
WCAG 2.1/2.2 — Web Content Accessibility Guidelines
| Text size | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text | Pass | Fail |
| Large text (18px+ bold) | Pass | Pass |
WCAG 2.1 Criterion 1.4.3 (AA): minimum 4.5:1 for text, 3:1 for large text.
Understanding color contrast
Color contrast ratio measures the difference in luminance between text and its background, expressed from 1:1 (no contrast) to 21:1 (black on white). Low contrast is the single most common WCAG failure on the web — it makes content unreadable for people with low vision, color blindness, or anyone on a phone in bright sunlight. Meeting the WCAG color contrast thresholds is a baseline requirement of the European Accessibility Act (EAA), the ADA, and Section 508.
How to use this contrast checker
Pick or paste a text (foreground) color and a background color. The tool instantly calculates the WCAG contrast ratio and shows whether the pair passes AA and AAA for both normal and large text. Adjust the colors until every check passes, then use those values in your CSS.
Contrast checker FAQ
What is a good color contrast ratio for WCAG?
For WCAG 2.1/2.2 Level AA you need at least 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold). Level AAA raises this to 7:1 and 4.5:1 respectively.
What is the difference between WCAG AA and AAA?
AA is the standard target required by most accessibility laws (EAA, ADA, Section 508, EN 301 549). AAA is an enhanced level used where the highest readability is needed. Aim for AA everywhere and AAA where you can.
Does the contrast rule apply to large text?
Yes, but with a lower threshold. Text that is at least 24px, or 18.66px and bold, only needs a 3:1 ratio at AA (4.5:1 at AAA).
Do icons and UI components need contrast too?
Yes. WCAG 1.4.11 requires a 3:1 contrast ratio for interactive UI components (buttons, form borders, focus states) and meaningful graphics against adjacent colors.
Is this color contrast checker free?
Yes — it runs entirely in your browser, needs no sign‑up, and is free to use for unlimited checks.
Make your website accessible in 3 minutes
7-day free trial. All 3 products. No credit card. Instant results.