Color Contrast Checker (WCAG)
Check color contrast against WCAG AA and AAA for accessible text — live ratio, pass/fail badges and a preview, in your browser.
🔒 Checked in your browser. Large text = 18pt+ (or 14pt+ bold). Thresholds: AA 4.5 / AAA 7 (normal), AA 3 / AAA 4.5 (large).
Check colour contrast for accessibility
Pick a text colour and a background colour to see the exact WCAG contrast ratio, whether it passes AA and AAA for normal and large text, and a live preview. Everything is computed in your browser using the official WCAG 2.1 relative-luminance formula.
What the levels mean
WCAG requires a contrast ratio of at least 4.5:1 for normal text (AA) and 7:1 for AAA. Large text (18pt+, or 14pt+ bold) needs 3:1 (AA) or 4.5:1 (AAA).
Where 4.5 comes from
The ratio is computed from relative luminance — each channel linearised, then weighted 0.2126 red, 0.7152 green, 0.0722 blue, because the eye is far more sensitive to green than to blue. Both luminances get 0.05 added before dividing, which models the light a real screen reflects even while showing black, and is why the scale tops out at 21:1 rather than running to infinity. WCAG then sets four thresholds: 4.5 for normal text at AA, 3.0 for large text at AA, 7.0 for normal text at AAA and 4.5 for large text at AAA. "Large" means 18pt, or 14pt bold — about 24px and 18.66px.
What the ratio cannot see
It is a formula over two colours and it does not know about the rest of your design. Thin fonts at the same ratio are harder to read than heavy ones, and the standard's font-weight rule is its only nod to that. Text over a photograph has a different ratio at every pixel, so passing at one sample tells you little. Semi-transparent colours must be composited against what is behind them before they mean anything here, which is the one item on this list the page does for you. Hover, focus and disabled states each need their own check, and a disabled control that fails is a common and defensible exception. Clearing 4.5 is a floor, not a target — plenty of comfortable, legible text sits far above it.
Frequently asked questions
What counts as large text?
18pt, or 14pt if it is bold — roughly 24px and 18.66px. Below that the AA threshold is 4.5, above it 3.0.
Which formula is used?
The WCAG 2.1 relative-luminance formula, the same one used by browser dev tools and accessibility auditors.
Does it handle transparency?
Yes. If the text colour carries alpha — 8-digit hex like #1f2937cc, rgba() or hsla() — it is composited over the background first, so the ratio reflects the flattened colour you actually see. A translucent background is composited over a white page first, and both the ratio and the preview use that painted colour.
Why 4.5 and not a rounder number?
It comes from a model of contrast sensitivity: 4.5:1 is roughly what someone with 20/40 vision needs to read normal text as easily as someone with 20/20 reads text at 3:1. The large-text threshold is lower because size does some of the same work.
My text sits over an image. What do I check?
The worst case, not an average — find the lightest region under light text, or the darkest under dark text, and check that. Better still, put a solid or scrim layer behind the text so there is one ratio to check.