Example
Contrast ratio: 21.00:1 (AAA)
Color Contrast / WCAG Checker
Check the contrast ratio between two colors and WCAG AA/AAA accessibility instantly in your browser. Free online color contrast checker.
Enter the values below, then press Calculate (or press Enter). The calculator updates your results instantly. Try different values to see how your inputs change the outcome.
- Foreground color — enter a text value. A typical Foreground color would be #000000.
- Background color — enter a text value. A typical Background color would be #ffffff.
- Text size — enter a choice from the options.
- Review your results — the key output is highlighted, with supporting figures below.
Loading calculator…
Results
Contrast ratio
| Detail | Value |
|---|---|
| Ratio (n:1) | |
| WCAG AA | |
| WCAG AAA | |
| Highest level | |
| Foreground | |
| Background |
What is this calculator for?
Measure the luminance contrast ratio between two colors and test WCAG 2.x AA/AAA accessibility levels.
How to Use This Calculator
Enter the values below, then press Calculate (or press Enter). The calculator updates your results instantly. Try different values to see how your inputs change the outcome.
- Foreground color — enter a text value. A typical Foreground color would be #000000.
- Background color — enter a text value. A typical Background color would be #ffffff.
- Text size — enter a choice from the options.
- Review your results — the key output is highlighted, with supporting figures below.
What You'll Need
- Foreground color
- a text value · required
- Background color
- a text value · required
- Text size
- a choice from the options (Normal text, Large text (≥18pt / ≥14pt bold), UI component / graphic) · optional
About This Calculator
WCAG contrast is a ratio from the relative luminance of two colors — how bright text appears against its background. The formula weights red, green, and blue by human perception.
WCAG AA requires 4.5:1 for normal text, 3:1 for large text and UI components, and 7:1 for AAA normal text. The tool computes the ratio and reports pass/fail for each level based on your selected text size.
Calculation runs entirely in your browser.
Worked Examples
Frequently Asked Questions
Why does my pastel-on-white text fail?
Low-contrast (pastel) colors are close in luminance to white, producing a ratio under 4.5:1 — below the AA requirement for normal-sized text.
What qualifies as "large text"?
Under WCAG, large is 18pt (24px) or larger for regular text, or 14pt (18.66px) or larger and bold. Large text has a lower 3:1 requirement.