What this tool answers
A color pair can look fine on your monitor and still fail for a reader in daylight, on a projector, or with low vision. WCAG defines a measurable ratio between the relative luminance of text and background. This page computes that ratio and tells you whether the pair passes AA or AAA for normal and large text.
How to use it
Set a text color and a background color with the pickers, or type a hex value into either field. The preview updates immediately. The ratio is shown as a number from 1 to 21, followed by the AA and AAA results for normal text (below 18pt, or 14pt bold) and large text (18pt and above, or 14pt bold and above).
If the pair fails, the Try a passing text color button darkens or lightens the text until it reaches 4.5:1, keeping the hue as close as possible. The suggested value is a starting point, not a design decision; check it against your palette and against the disabled and hover states.
What it does not do
It does not check the whole page. A passing pair in isolation can still be unreadable if the text sits on a gradient, an image, or a translucent overlay, because the effective background is a mix. Sample the actual rendered color under the text. It also does not test non-text contrast (icons, borders, focus rings), which has a separate 3:1 requirement in WCAG 2.2.
It does not replace a manual accessibility review. Contrast is one barrier among many: font size, spacing, motion, keyboard order, and screen-reader labels all matter.
A practical threshold
For body text, aim for 7:1 rather than the 4.5:1 minimum. The minimum is a floor, not a target; the extra headroom survives a dim screen and a tired reader. For large headings, 4.5:1 is usually enough. For secondary metadata such as timestamps, do not let the desire for a quiet gray push the text below 4.5:1 — if it is worth reading, it is worth seeing.