Color Contrast Checker (Colour)

For WCAG 2.2 Level AA, the minimum is 4.5:1 for normal text and 3:1 for large text. Level AAA raises that to 7:1 for normal text and 4.5:1 for large text. Most teams design to AA. It's the level referenced by most accessibility laws and procurement standards, including the UK's public sector accessibility regulations.

Large text is defined as 18.66px (14pt) and bold, or 24px (18pt) and above at any weight. Everything smaller than that's judged against the stricter "normal text" thresholds, even if it looks reasonably big on screen.

It shouldn't, if both tools implement the WCAG 2.2 relative luminance formula correctly. The maths is a published standard, not a matter of opinion. If you see a different result, check whether the other tool is reading the same two hex values, and whether either colour has transparency (opacity changes the effective colour actually rendered, which changes the ratio).

No. Contrast is necessary but not sufficient. It says nothing about whether the underlying information is conveyed by colour alone, whether interactive elements have a visible focus state, whether the page works with a screen reader, or whether text remains readable when a user overrides font size or applies their own colour scheme. Treat a passing ratio as one check cleared, not a finished accessibility review.

When a pair fails, the tool keeps your foreground colour's hue and saturation and searches for the smallest change in lightness (darker or lighter, whichever is closer to your original colour) that reaches the target ratio. It's a starting point for a design decision, not a replacement for choosing a colour that still fits your brand and layout.

Yes, switch to "Check a whole page" above. Paste your CSS or HTML, or enter a live URL, and the tool extracts every color and background-color declaration it can find (including CSS custom properties) and scores each pair against WCAG. It reads what your CSS declares, not what a browser actually renders after JavaScript or the cascade runs, so it also shows an "every text colour against every background colour" matrix as a second check) useful when the automatic pairing doesn't match your real layout.

WCAG (Web Content Accessibility Guidelines) is the standard rulebook for making digital content usable by people with low vision, colour blindness or other visual differences. AA (4.5:1 normal text, 3:1 large text) is the minimum most laws and clients expect: pass it and text is readable for almost everyone. AAA (7:1 / 4.5:1) is a stricter, optional bar, good for body copy on content-heavy sites but often impractical for a full brand palette.

Yes, but the threshold is different. Non-text elements that carry meaning (icons, form field borders, focus indicators, button outlines) have their own WCAG 2.2 threshold of 3:1 against their surroundings, separate from the 4.5:1 / 3:1 text rules above.