Check any text/background color pair against WCAG 2.1 — exact contrast ratio, AA and AAA verdicts for normal and large text, plus a same-hue fix suggestion when it fails.
Settings
Generated locally in your browser — your settings and results never leave this page.
The most measurable accessibility rule
Pick a text color and a background; the checker computes the exact WCAG 2.1 contrast ratio — relative luminance from linearized sRGB, then (L1+0.05)/(L2+0.05), the same formula Lighthouse and axe use — and scores every threshold at once: AA and AAA, normal and large text, plus the 3:1 requirement for UI components like borders and icons.
The thresholds, in one place
- AA normal text: 4.5:1 — the legal baseline in most jurisdictions.
- AA large text: 3:1 (large = 18pt/24px regular, or 14pt/18.66px bold — the WCAG definition, restated in the report so nobody has to look it up).
- AAA: 7:1 normal / 4.5:1 large — worth targeting for body text.
- Non-text UI: 3:1 for meaningful graphics and component boundaries.
The fix suggestion
When a pair fails AA, the checker walks the text color’s OKLCH lightness — hue and chroma held — until it passes 4.5:1, and shows that color with its real ratio. Your brand hue survives; only the lightness moves. For a full candidate list per background, continue to the Accessible Text Color Generator.
Worked example
#9ca3af on #ffffff → 2.54:1
AA normal FAIL · AA large FAIL · UI FAIL
Suggested fix: #6b7280 → 4.83:1Limitations — stated honestly
- Contrast is necessary, not sufficient: color-only meaning, focus visibility and text over images need separate checks.
- Ratios are computed for solid colors; text over gradients or images must be checked at the worst point.
- WCAG 2.x math slightly under-penalizes light-on-dark pairs (the issue APCA in WCAG 3 drafts addresses) — but 2.1 remains the standard you are audited against today.
How to use the WCAG Contrast Checker
- Pick the text color and the background color.
- Read the live ratio and the AA/AAA badges on the sample text.
- If it fails, use the suggested same-hue fix in the report.
- Copy the report for your accessibility review.
Frequently asked questions
What ratio do I need to pass WCAG?
4.5:1 for normal text and 3:1 for large text (18pt/24px regular, or 14pt/18.66px bold) at level AA; 7:1 and 4.5:1 at AAA. Non-text UI components like input borders and icons need 3:1. The checker scores all five thresholds at once.
How is the ratio calculated?
Per WCAG 2.x: relative luminance of each color from linearized sRGB, then (L1+0.05)/(L2+0.05). It is the standard formula — the same one audit tools and browsers use — so results match Lighthouse and axe.
What does the suggested fix do?
It keeps your hue and chroma and walks the OKLCH lightness until the pair passes 4.5:1 — so the fixed color still looks like your color, just darker or lighter. It appears whenever the AA normal-text check fails.
Does passing the ratio guarantee accessibility?
No — contrast is one criterion. Color-only meaning (red vs green with no other cue), focus visibility and text over images need their own checks. The ratio is necessary, not sufficient.
Fix text that fails contrast
A text colour that meets WCAG on your background, chosen rather than guessed.
- WCAG Contrast Checker you are hereMeasure what the current pairing actually scores.
- Accessible Text Color GeneratorGet a text colour that passes on that background.
- Accessible Color Pair GeneratorFind further pairings that hold up across the design.
