Check text and background colours against WCAG AA and AAA
Runs in your browser. Nothing you type is sent anywhere. Updated on 24 Oct 2026.Enter a text colour and a background colour and see the WCAG contrast ratio with pass or fail for AA and AAA, at normal and large text sizes. Body text needs 4.5 to 1 for AA; large headings need 3 to 1. If a pair fails, the tints and shades palette shows lighter and darker versions of your colour to try next.
The page opens with the Contrast (WCAG 2) section first, measuring your colour as text on white, on black and on your background.
Enter the text colour in Colour in any format, below the contrast results.
Enter the background colour in Your background, or choose it with the colour picker beside it.
Read AA, AA large, AAA and AAA large, each marked pass or fail; Swap exchanges the two colours.
If a pair fails, double-click a swatch under Tints and shades to try a lighter or darker version.
This color converter takes a colour in any common format and gives it back in all of them: HEX, RGB, HSL, HWB, OKLCH and CMYK. Type #2B59F5, rgb(43 89 245), hsl(227 91% 56%), oklch(55% 0.22 265), a CMYK value or a CSS name like teal, and every other format updates, with a live swatch, a picker and one-click copy.
Front-end developers use it to move a brand colour from a design file into CSS, to switch a palette to OKLCH so tints look even across hues, and to check that text is readable before a pull request. Designers use it to hand a print shop approximate CMYK numbers, and anyone can use the contrast panel to test a text colour against white, black or a background of their choice.
Contrast follows WCAG 2 exactly: the ratio is shown to two decimals, rounded down so a pair at 4.49 never looks like it passes, with AA and AAA marks for normal and large text. Translucent colours are blended over the background first. The tints and shades row mixes your colour with white and black in 10% steps; click any swatch to copy its hex.
The rest of the article, and all 6 questions about Color Converter, are on the Color Converter page.
WCAG 2 level AA needs at least 4.5 to 1 for normal text and 3 to 1 for large text, meaning 24 px regular or about 19 px bold. Level AAA needs 7 to 1 and 4.5 to 1. The checker shows the exact ratio and marks each level as pass or fail for the pair you entered.
CMYK values here are approximate. The tool uses the standard formula that assumes perfect inks, but real printing depends on the press, the paper and the colour profile, and some bright screen colours cannot be printed at all. Use these values as a starting point and ask your printer to match against a proof.
Yes. rgba(), hsla(), the slash syntax such as rgb(0 0 0 / 50%) and 8-digit hex like #FF000080 are all read, and alpha is carried into every format that supports it. CMYK has no transparency. For the contrast check, a translucent colour is blended over the background before the ratio is calculated.
No. Conversions run in your browser. The colour you are editing is not sent anywhere; only the second colour used for the contrast comparison is remembered on this device so the checker opens where you left it.
Still stuck? Ask about Color Converter and anybody who knows can answer. No account needed.
On the related tools: TSV to JSON – Convert tab-separated values, such as a paste from Excel, into JSON · CSV to Markdown Table – Convert CSV or TSV to a GitHub Markdown table with aligned columns and escaped pipes.
In the collection Developer Converters.