Colour Contrast Checker

Free WCAG colour contrast checker. Enter a text colour and a background colour to get the exact contrast ratio and see whether it passes AA and AAA for normal text, large text and user-interface elements. Runs in your browser.

Check whether your text colour has enough contrast against its background to meet WCAG, the accessibility standard behind laws like the European Accessibility Act. Enter two colours and see the exact contrast ratio and what it passes. Everything runs in your browser.

Text colour

Background colour

The quick brown fox jumps over the lazy dog.

6.66:1

Passes AA

Good contrast. This passes AA for normal text, the standard most sites must meet.

What this passes

PassNormal text, AA4.5:1 needed. The level most websites must meet.

FailNormal text, AAA7:1 needed. The enhanced level.

PassLarge text, AA3:1 needed. Text 18pt or larger, or 14pt bold.

PassLarge text, AAA4.5:1 needed.

PassUI & graphics, AA3:1 needed. Buttons, form borders, icons, charts.

Contrast is one of the most common accessibility failures and one of the easiest to fix, but it is only one WCAG requirement among many. A passing ratio does not make a page accessible on its own, and colour should never be the only way you show meaning. WCAG 2.2 Level AA (a 4.5:1 ratio for normal text) is the practical target for most legal duties, including the European Accessibility Act. This tool runs entirely in your browser.

The accessibility fix that takes five minutes

Low colour contrast is the most common accessibility failure on the web, and it locks out far more people than most teams realise: anyone with low vision, colour blindness, or just a phone screen in bright sunlight. It is also one of the easiest problems to fix once you can see it. This free checker gives you the exact contrast ratio between any two colours and tells you plainly what it passes, so light-grey-on-white text and other quiet barriers have nowhere to hide. It runs in your browser.

How it works

Pick two colours, a text colour and a background, with the pickers or by typing a hex, rgb() or colour name.
See the ratio and a live preview of real text in those colours, updating as you change them.
Read what it passes: AA and AAA for normal text, large text and interface elements, each marked pass or fail.

What the numbers mean

WCAG, the standard behind most accessibility laws, sets clear targets. Normal text needs a contrast ratio of at least 4.5 to 1 for Level AA, the level most sites must legally meet. Large text (18pt, or 14pt bold) needs 3 to 1. Buttons, form borders, icons and chart colours also need 3 to 1. The enhanced Level AAA asks for 7 to 1 on normal text. The checker uses the official relative-luminance formula, so the ratio it shows is the same one an auditor would calculate.

Contrast is necessary, not sufficient

Passing contrast does not make a page accessible on its own, and two colours that pass can still be a poor choice if you use colour as the only way to show meaning, a red word for an error with no icon or text, for example. Colour-blind and screen-reader users will miss it. Treat contrast as the first, easiest win, then work through the rest: our WCAG 2.2 AA checklist covers the full set of checks, and our accessibility statement generator helps you document where you stand.

Free, private, and built for real work

Designers, developers, content teams and anyone tidying up a brand palette can use this to settle a colour question in seconds, before it ships. There is no signup and nothing is uploaded, so you can paste in brand colours freely. It sits alongside the other accessibility tools on Etoolio, so you can check a colour, tick off the wider WCAG list, and publish an honest accessibility statement, all in one place.

Good to know

Colour Contrast Checker, frequently asked questions

What contrast ratio do I need?

For WCAG Level AA, which is the level most accessibility laws require, normal text needs a contrast ratio of at least 4.5 to 1 against its background, and large text (18pt, or 14pt bold) needs at least 3 to 1. User-interface elements like buttons, form borders and icons also need 3 to 1. The enhanced Level AAA asks for 7 to 1 for normal text and 4.5 to 1 for large text. This tool shows you the exact ratio and every level it passes or fails.

How is the contrast ratio worked out?

It uses the official WCAG formula. Each colour is converted to its relative luminance (how light it is to the human eye, weighting green most and blue least), and the ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05. The result runs from 1 to 1 (no contrast) up to 21 to 1 (black on white). You do not need to understand the maths; the tool does it and tells you plainly what passes.

What counts as large text?

WCAG defines large text as at least 18pt, or 14pt if it is bold. That is roughly 24px, or about 18.66px bold, on screen. Large text is easier to read, so it is allowed a lower contrast ratio (3 to 1 for AA). Anything smaller is treated as normal text and needs 4.5 to 1.

Is passing contrast enough to be accessible?

No. Colour contrast is one of the most common accessibility failures and one of the easiest to fix, but it is only one of many WCAG requirements. You also need proper text alternatives, keyboard access, clear labels and more. And you must never use colour alone to convey meaning, since colour-blind users and screen-reader users will miss it. Use this alongside our WCAG checklist and accessibility statement generator.

What colour formats can I enter?

Hex codes (#1a2b3c or the short #abc form), rgb() values, and basic colour names like black or navy. You can also use the colour pickers. Everything updates live as you change the values.

Is it free and private?

Yes. It is free with no signup, and the whole calculation runs in your browser, so nothing is sent anywhere.

Keep going