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 above are for text. Non-text elements have their own WCAG rule (criterion 1.4.11): field borders, icons, form controls and the meaningful parts of a graphic need a contrast of at least 3:1 against what sits next to them. This tool shows the four text badges; for an icon or a border, just check that the ratio reaches 3:1 even if the "AA normal" badge fails.
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