Colour Contrast Checker
Enter a text and background colour and see the WCAG 2.2 ratio and AA/AAA result instantly.
This tool calculates the contrast ratio between a text and a background colour you choose, using the WCAG 2.2 relative luminance formula. You can enter a colour with the colour picker, or as HEX, RGB or HSL, including shorthand HEX. The result appears alongside a live preview of text, a button and a link at real sizes, so you can judge the look and not just a number. If you enter a transparent (alpha) colour, it is blended against the chosen background before the ratio is worked out.
The result is checked against four thresholds: AA 4.5:1 and AAA 7:1 for normal text, AA 3:1 and AAA 4.5:1 for large text, and 3:1 for user interface components and graphics. If the ratio falls short, the tool suggests the nearest passing colour that keeps the same hue, and that suggestion can be applied with one click. In palette mode you can enter between 2 and 6 colours and see the ratio for every pair in a single table.
This check only computes a numeric contrast ratio, it doesn't look at other things that affect legibility such as typeface, letter spacing or visual clutter around the text, and it doesn't scan a live page for you. Different types of colour blindness perceive the same ratio differently, so a passing ratio doesn't guarantee comfortable reading for everyone. A thorough accessibility review also needs testing with real users or a screen reader.
FAQ
How big does text need to be to count as large?
Under WCAG, roughly 18pt (24px) regular or 14pt (18.5px) bold and larger counts as large text; anything smaller has to meet the stricter normal-text thresholds.
Should I aim for AA or AAA?
AA is the baseline expected on most sites; AAA is a stricter target worth aiming for when accessibility is a priority, though it's harder to hit while keeping brand colours.
If the ratio passes, is my design fully accessible?
No, contrast ratio is one factor, typeface, weight, spacing and surrounding content also affect legibility, so a passing ratio here doesn't replace a fuller accessibility review.
Are the colours I enter stored anywhere?
No, everything is calculated entirely in your browser, no colour or palette leaves your device.
