Large text — 24px headline weight
Normal text at 16px: the size body copy, labels, and links actually render at.
The exact WCAG numbers, not a vibe check
This color contrast checker implements the WCAG 2 formula precisely — sRGB linearization, relative luminance, the (L1 + 0.05) / (L2 + 0.05) ratio — so its numbers match Chrome DevTools, axe, and every serious accessibility audit tool. Pick your text and background colors and you get the ratio to two decimals plus live pass/fail verdicts for all four thresholds that matter: AA and AAA, at normal and large text sizes. The verdict chips read as words, not just colors — this page practices what it checks.
How to check your colors
- Set the text color and background — pickers or hex, they stay in sync.
- Read the ratio and the four verdicts. AA normal (4.5:1) is the one most audits require.
- Failing? The hint tells you which direction to move. Nudge the color and watch the ratio live.
- Share the pair — the colors ride the page URL, so a link reproduces exactly what you see.
Where contrast decisions actually happen
Contrast questions rarely arrive alone. They show up while picking gradient stops for a headline — the gradient text generator pairs with this page well — or while styling a QR code, where scanners are even stricter about contrast than human eyes. And if a brand color keeps failing on white, test it against the tinted backgrounds from the light gradient collection instead; a slightly tinted surface often buys the missing tenths of a point without changing the brand.
Frequently asked questions
What contrast ratio do I actually need?
For WCAG AA — the level most laws and audits reference — normal-size text needs at least 4.5:1 against its background, and large text (roughly 24px, or 18.5px bold) needs 3:1. The stricter AAA level asks for 7:1 and 4.5:1 respectively. This checker shows all four verdicts live as you pick colors.
What is the difference between WCAG AA and AAA?
AA is the standard compliance target: readable for most users including moderate low vision. AAA is the enhanced tier for maximum readability — worth hitting for body text on content sites, but often impractical for brand-heavy UI. A sensible default: AA everywhere, AAA where people read for minutes at a time.
How is the contrast ratio calculated?
From the WCAG 2 formula: each color’s relative luminance is computed with the sRGB linearization curve, then the ratio is (lighter + 0.05) ÷ (darker + 0.05), running from 1:1 (identical) to 21:1 (black on white). This page implements that formula exactly, so results match Chrome DevTools and other WCAG tools.
What counts as "large text"?
WCAG defines it as at least 24px regular weight, or about 18.5px bold. Large text keeps its shape with less contrast, which is why its thresholds are lower (3:1 for AA). Headlines often qualify; body copy, captions, and UI labels almost never do — hold those to the normal-text numbers.
My brand color fails — what do I do?
Keep the brand color for large elements — buttons, headings, decorative blocks — and darken or lighten it only where it carries small text. The hint under the ratio tells you which direction to move. A shade tuned a step darker for text-on-light keeps the brand feel while clearing 4.5:1; most design systems ship exactly that pair.
Does this work for gradient or image backgrounds?
Check the worst spot: sample the lightest area the text sits over (for dark text) or the darkest (for light text) and test against that. If the worst-case pair passes, the whole surface passes. Making a gradient headline instead? The gradient-text generator pairs well with this page.
Styling a headline? The gradient text generator → QR codes need contrast too — the QR studio →