Check colour contrast for accessibility with this WCAG contrast checker
This free colour contrast checker measures the exact contrast ratio between any text colour and background colour, then tells you instantly whether the pair meets the WCAG accessibility guidelines. Choose a colour with the swatch or type a six-digit (or three-digit shorthand) HEX code, and the contrast ratio, the AA and AAA pass-fail badges, and the live text preview all update the moment you change anything. There is nothing to install and nothing to wait for — the result appears as you type.
It is built for designers, front-end developers, content writers and anyone running an accessibility review. If you are unsure whether your light-grey caption is readable, whether a button label has enough contrast, or whether your brand colours will pass an audit, this tool answers in one look. Because the preview shows a real heading, a paragraph of body text and a line of small print on your chosen background, you see how the combination actually feels — not just a number.
How to use it
- Set your text colour using the colour swatch or by typing a HEX code such as #1F2937.
- Set your background colour the same way — both fields stay in sync with their swatches.
- Read the large contrast ratio number and the five pass/fail badges underneath it.
- Glance at the live preview to judge real readability, especially the small-print line.
- Nudge the colours until the badges you care about turn green. Use Swap colours to flip text and background instantly.
How the contrast ratio is calculated
The ratio is not a simple difference between two colours — it is based on relative luminance, a measure of how bright each colour appears to the human eye. Each colour's red, green and blue channels are converted from the 0–255 range, gamma-corrected, and weighted (green counts most, blue least) to produce a luminance value between 0 and 1. The contrast ratio is then (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the lighter colour and L2 the darker one. That formula is exactly what WCAG 2.1 specifies, which is why the score here matches what an auditor or screen-reader testing tool will report. Ratios run from 1:1 (two identical colours, no contrast at all) up to 21:1 (pure black on pure white).
Understanding AA and AAA pass levels
WCAG defines two conformance levels for text contrast. AA is the practical standard most teams aim for and the level referenced by accessibility laws such as the ADA, Section 508 and the European EN 301 549 standard: it needs 4.5:1 for normal text and 3:1 for large text. AAA is the enhanced level for situations that demand the highest readability, requiring 7:1 for normal text and 4.5:1 for large text. The tool also shows a UI & graphics badge, which uses the 3:1 threshold from WCAG's non-text contrast rule — handy for checking icons, form borders, focus rings and chart elements that carry meaning but are not body copy.
What counts as large text, and common mistakes
Large text means at least 24px (roughly 18pt), or 18.66px (14pt) when bold. Because larger shapes are easier to read, they are allowed a gentler 3:1 ratio, so a colour pair can pass for a heading yet fail for the paragraph beneath it — always check the badge that matches your actual font size. A few traps catch people out: very light grey text on white (a popular "minimal" look) often lands around 2.5:1 and fails outright; placing text over a photo or gradient means the contrast changes pixel by pixel, so test against the darkest and lightest areas; and contrast alone is not enough — never rely on colour by itself to convey information like errors or required fields, since colour-blind users may not see the difference.
Private by design
Everything happens locally in your browser using the standard WCAG luminance maths. No colours, codes or results are ever uploaded to a server, and there is no sign-up, no limit on how many combinations you can test, and no tracking of what you check. You can use it on a confidential brand palette or an unreleased product just as safely as on a public site, and it keeps working even if your connection drops once the page has loaded.