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.
Check the WCAG contrast ratio between any two colors — foreground and background — and see whether the pair passes AA and AAA for normal and large text. The ratio uses the WCAG relative-luminance formula, the same numbers other accessibility tools report.
When a combination fails, the contrast checker suggests the nearest accessible color that preserves your hue, so you can fix the pair instead of guessing.
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
Want the full design system from a color? Open the color palette generator to create accessible palettes, semantic tokens, light and dark themes, and production-ready CSS — all from a single color.
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.
Related tools
Related guides
Design systems · 25 Aug 2026
How to build an accessible color palette (2026 guide)
Stop guessing at color combos. Here's how to turn one brand color into a full accessible palette that passes WCAG AA and AAA.
Color theory · 21 Aug 2026
HEX vs HSL vs OKLCH: which color space should you use?
Three color spaces, three jobs. Here's what HEX, HSL and OKLCH actually are and when each earns its place.
Design systems · 18 Aug 2026
Dark mode the right way: don't just invert your colors
Dark mode isn't light mode with darker colors. Here's the semantic-token approach that actually looks good and passes contrast.
WCAG contrast checker runs entirely in your browser — nothing you enter is sent to a server.