Check text and background colour pairs against WCAG contrast rules — the exact ratio plus pass or fail for AA and AAA, normal and large text, live as you pick. Runs entirely in your browser — your numbers never leave this device.
Normal text: the quick brown fox jumps over the lazy dog.
Large text: the quick brown fox.
Large text means at least 24 px, or 18.66 px and bold, in WCAG terms. The ratio is symmetric — swapping text and background colours changes nothing — because it only compares the two luminances.
| Level | Normal text | Large text | Means |
|---|---|---|---|
| AA | 4.5 : 1 | 3 : 1 | The standard most sites are required or expected to meet |
| AAA | 7 : 1 | 4.5 : 1 | The enhanced tier — recommended for long-form reading |
| Large text (definition) | — | 24 px, or 18.66 px bold | Text at or above this size is graded at the large-text thresholds |
| Non-text (UI components, icons) | 3 : 1 | 3 : 1 | WCAG asks 3:1 for meaningful graphics and control boundaries |
Contrast is not how different two colours look — it is a defined computation. Each sRGB channel is first linearised (computer values are gamma-encoded, so raw bytes must be un-bent with the piecewise formula above), then combined into a relative luminance weighted toward green, because human vision is. The ratio of the two luminances, with 0.05 added to both to model viewing flare, runs from 1:1 for identical colours to 21:1 for black on white. This checker does that arithmetic exactly and grades the pair against all four WCAG thresholds at once.
The thresholds in the table are the WCAG 2.x success criteria: AA is the level most accessibility law and procurement points at, AAA is the stricter tier. Large text gets lower thresholds because thick strokes survive low contrast better; WCAG counts text as large at 24 px, or 18.66 px (14 pt) and bold. The one-step cliff is real and worth seeing once: on white, #777777 scores 4.48 and fails AA for normal text, while one step darker at #767676 scores 4.54 and passes — the checker updates live so you can hunt a boundary like that by eye.
Note what the ratio ignores: it is symmetric (text and background are interchangeable to the formula), it says nothing about hue, and it flattens the difference between a colour pair and its reverse. It is a floor for legibility, not a design judgement — two palettes can both pass AA and read completely differently.
AA is the conformance level written into most law, procurement rules and platform guidelines, so it is the practical target: 4.5:1 for body text, 3:1 for large text. AAA (7:1 / 4.5:1) is worth reaching for long-form reading content when the palette allows it, but WCAG itself notes AAA cannot be met for every colour combination, and failing AAA is not failing accessibility.
Because the formula sees only luminance, not hue. A saturated red and a saturated green can be equally bright — nearly the same linearised luminance — and score close to 1.5:1 despite being obviously different colours to most eyes (and indistinguishable to some colour-blind readers). Distinctness is not contrast; the worked grey examples show the formula grading shades most people can barely tell apart as pass and fail.
Yes — the formula always divides the lighter luminance by the darker, so the pair (#777777, #ffffff) scores 4.48 in both directions and both directions fail AA for normal text by the same hair. Readability in practice can differ (light text on dark backgrounds suffers halation for some readers), but the WCAG number is deliberately symmetric.
At least 24 px in CSS pixels, or at least 18.66 px (the pixel equivalent of 14 pt) when bold. Headlines and big UI labels usually qualify; button text at 16 px bold does not — it needs the full 4.5:1 for AA. The preview in the widget shows both sizes so you can see which grade your actual text falls under.
It guarantees one criterion. Font size, weight, line length, and the fact that colour alone must not carry meaning (a red/green status difference needs a label or icon too) are separate criteria the ratio cannot see. Treat 4.5:1 as the floor of a legible design, not its certificate.
More in Developer Tools · Browse all tools