WCAG compliance checker for your exact text size and weight

How to use the WCAG checker

1. Set the Text colour and the Background. Any CSS colour works.
2. Enter Your text size in CSS pixels, from 1 to 200.
3. Tick Bold (700 or heavier) if the text uses a bold weight.
4. Read the verdict for your text, then the table of success criteria, and check the live preview.
5. Use the swap button to test the colours the other way round, for example white text on a coloured button.

What it does and when to use it

The general colour contrast checker tells you which levels a colour pair meets. This page answers a narrower question: does this text, at this size and weight, pass? That matters because WCAG relaxes the rules for large text. A heading can use a lighter grey than body copy.

Use it when you set type scales, choose a caption or placeholder colour, or argue with a design review about whether a 20px semibold label is “large”. For a whole palette at once, the contrast grid checks every pair.

How it works

Each colour is converted to relative luminance using the sRGB transfer function and the weights 0.2126, 0.7152 and 0.0722 for red, green and blue. The contrast ratio is (lighter luminance + 0.05) ÷ (darker luminance + 0.05), from 1:1 to 21:1.

The checker then decides whether your text is large: 24px or more, or 18.66px or more when bold is ticked. Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text needs 3:1 for AA and 4.5:1 for AAA. The table also lists SC 1.4.11, which asks 3:1 for icons, input borders and other non-text parts.

Pass or fail is decided on the exact ratio, never the rounded one, so 4.499:1 fails 4.5:1.

Worked examples

These are the tool’s own results.

Blue link on an off-white page. #2563eb on #f8fafc at 16px regular gives 4.94:1: “Pass AA — normal text”. It fails AAA normal text, which needs 7:1.

Grey placeholder text, even when large. #9ca3af on white at 24px gives 2.54:1: “Fail — counts as large text”. Large text still needs 3:1, so this grey fails every row, including non-text contrast.

The 18.66px bold edge. #767676 on white is 4.54:1. At 18.66px bold the verdict is “Pass AAA — counts as large text”. Drop to 18px bold and it becomes “Pass AA — normal text”, because the text is no longer large.

Limits and tips

• Enter sizes in CSS pixels. If your type is set in rem, convert it first: with the usual browser default of 16px, 1.5rem is 24px.
• Weight must really be bold. A 600 weight is not ticked as bold here; treat it as normal text to be safe.
• Translucent text is blended onto the background before the ratio is worked out. To check a translucent colour first, use the alpha blend calculator.
• Simulate how the pair looks with colour-vision deficiency in the colour blindness simulator.
• Everything runs in your browser; no colours are sent anywhere.