Checks whether two colours —the text and the background— stand apart enough for anyone to read them, including people with low vision or colour blindness. It computes the contrast ratio between the two and compares it against the official WCAG 2.1 accessibility thresholds. The ratio ranges from 1:1 (two identical colours, unreadable) to 21:1 (pure black on pure white). All the maths runs in your browser: nothing is uploaded to any server.
1. Click the Text colour picker and choose the colour of the lettering.
2. Click the Background colour picker and choose the background it will sit on.
3. The preview shows a real sample with those two colours, and below it the ratio and the four PASS/FAIL badges appear.
4. Everything recomputes instantly as you move the pickers; next to each one you can see the chosen #rrggbb value.
The contrast ratio measures how much difference in light there is between the two colours. It's computed in two steps:
• Relative luminance — for each colour the light the eye perceives is computed with the WCAG formula: each R, G and B channel is scaled to 0-1, gamma-corrected (linearised) and combined weighted as 0.2126·R + 0.7152·G + 0.0722·B (green weighs more because the eye sees it as brighter). The result ranges from 0 (black) to 1 (white).
• Ratio — with the luminance of the lighter colour (L1) and the darker one (L2), it applies (L1 + 0.05) / (L2 + 0.05). The +0.05 avoids extreme divisions. It's symmetric: it doesn't matter which colour is the text and which is the background, the ratio is the same.
Each combination is evaluated against four official thresholds. AA is the legal, recommended minimum; AAA is the enhanced level (prolonged reading or low-vision audiences):
• AA — normal text: ratio ≥ 4.5:1.
• AA — large text: ratio ≥ 3:1.
• AAA — normal text: ratio ≥ 7:1.
• AAA — large text: ratio ≥ 4.5:1.
Large text demands less because its strokes are thicker and easier to read. Aim for AA at least; for AAA if you can.
The thresholds of the first four badges are for text. Non-text elements have their own WCAG rule (criterion 1.4.11): input borders, icons, form controls and the meaningful parts of a chart need a contrast of at least 3:1 against what is next to them. That is the fifth badge, User interface components and graphics.
When a combination does not reach AA (or, if it already does, AAA), text colours of the same hue that do reach it are suggested: one darker and one lighter if it exists, changing the minimum. Only the OKLCH lightness is moved, which is the lightness the eye perceives, so the colour genuinely resembles yours. Press Use to try it.
What laws and accessibility standards require today is WCAG 2.x, which is what this tool measures. WCAG 3 is still a W3C draft (the latest one from September 2026) and its text says the contrast algorithm is yet to be determined. APCA, which many websites present as «the WCAG 3 contrast», left that draft in 2023: it is an interesting proposal, but it is not the standard. If you use it, also meet WCAG 2.
Text counts as large —and gets the softer thresholds— when it's 18pt or bigger (roughly 24px), or 14pt or bigger (roughly 18.67px) when bold. Below those sizes it counts as normal text and must meet the stricter threshold. The preview includes a line of each size so you can compare.
Below the ratio there are four rows, one per criterion, each with a badge:
• PASS (green, with a tick) — that combination meets that level.
• FAIL (red, with a cross) — it does not meet it; the contrast needs to go up.
Since the thresholds increase, if it passes AAA normal (7:1) it passes all the others too. Text that only passes "AA large" (3:1) is not valid for normal text.
If a combination fails:
• Darken the text or lighten the background (or the reverse): the greater the difference in luminance, the higher the ratio.
• Don't rely on hue alone — two vivid colours (red on green) can have a very low contrast despite "clashing". What counts is the light, not the colour.
• Mid grey is treacherous: light-grey text on white usually fails; push it towards black.
• Don't use colour alone to convey information (links, errors): back it up with an underline, an icon or text.
• Adjust the pickers until the badge you care about turns to PASS.
Large text = 18pt+ (24px) or 14pt+ (18.67px) bold