WCAG contrast checker
Check the contrast ratio between two colors against WCAG 2.x AA and AAA thresholds for normal and large text, then fix failures instantly.
Text color
Background color
Normal text sample — the quick brown fox jumps over the lazy dog.
Small print sample at 12 px.
Contrast ratio 4.54:1
| Threshold | Required | Result |
|---|---|---|
| AA normal text | ≥ 4.5 | PASS |
| AA large text | ≥ 3.0 | PASS |
| AAA normal text | ≥ 7.0 | FAIL |
| AAA large text | ≥ 4.5 | PASS |
- Text
#767676- Background
#ffffff
How to use this tool
- Set the text color and the background color behind it.
- Read the measured WCAG 2.x contrast ratio and pass/fail results for AA and AAA at normal and large text sizes.
- If a pair fails, use “Fix contrast†to get the nearest accessible text color that preserves the hue.
Frequently asked questions
- What contrast ratios does WCAG require?
- WCAG 2.x AA needs at least 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt bold). AAA raises those to 7:1 and 4.5:1 respectively. This tool grades both levels.
- How is the contrast ratio calculated?
- With the WCAG 2.x relative-luminance formula: both colors are converted to linear sRGB, luminance is computed, and the ratio is (lighter + 0.05) / (darker + 0.05).
- Can it fix failing combinations?
- Yes — when a pair fails, the tool can suggest the nearest adjusted color that passes, applied with one click instead of manual trial and error.