WCAG Color Contrast Ratio Calculator
Check the contrast ratio between text and background RGB colours against WCAG AA and AAA levels.
Compare Your Options And Get Clear Answers
Check the contrast ratio between text and background RGB colours against WCAG AA and AAA levels.
WCAG Color Contrast Ratio Estimator
Enter your numbers below for an instant estimate.
How It Works
Key concepts behind this calculator
Enter Values
Fill in each field with your own numbers.
Calculate
Results update as you change the inputs.
Review
Read the breakdown and the explanation.
Adjust
Change values to compare scenarios.
WCAG Quick Guide
Typical values for reference.
| Pair | Ratio | AA text | AAA text |
|---|---|---|---|
| Black on white | 21.00:1 | Pass | Pass |
| Dark grey on white | 7.46:1 | Pass | Pass |
| Mid grey on white | 4.48:1 | Fail | Fail |
| Light grey on white | 2.32:1 | Fail | Fail |
| White on blue | 5.57:1 | Pass | Fail |
| Rule of Thumb | Check inputs | Use as a guide | Round sensibly |
WCAG Color Contrast Calculator FAQ
Answers to common questions about this calculator.
4.5:1 for normal text and 3:1 for large text.
7:1 for normal text and 4.5:1 for large text.
Contrast = (L1 + 0.05) / (L2 + 0.05), with L the relative luminance.
It is an estimate based on the inputs you enter. Check real quotes, labels or official guidance for important decisions.