Colour contrast checker
Enter two colours and see the WCAG 2.2 contrast ratio update live, with a pass or fail at Level AA and AAA. Hex, RGB or HSL. Free, instant, no sign-up.
Contrast ratio
17.06 : 1
Passes AA and AAA for normal text.
| Text / element | Level AA | Level AAA |
|---|---|---|
| Normal textbelow 24px (or 18.66px bold) | Pass | Pass |
| Large text≥24px, or ≥18.66px (14pt) bold | Pass | Pass |
| UI & graphicsicons, borders, chart parts (1.4.11) | Pass | Not applicable at this level |
Preview
Small sample text — the quick brown fox jumps over the lazy dog.
Large sample heading
Bold body text at 18.66px counts as large.
The preview uses your two colours exactly. Everything else on this page uses our own verified palette.
What the thresholds mean
Contrast is a ratio between 1:1 (identical colours) and 21:1 (black on white), computed from the relative luminance of each colour. The exact formula is defined by WCAG and is the same one our own scanner (axe-core) uses, so a result here matches what a full-page scan would report.
- Normal text — 1.4.3 Contrast (Minimum), AA. At least 4.5:1. This is the level almost every accessibility law points to. Understanding 1.4.3 · how our scanner checks it.
- Large text — also 1.4.3, AA. At least 3:1. Large means ≥24px, or ≥18.66px (14pt) bold.
- Enhanced — 1.4.6 Contrast (Enhanced), AAA. 7:1 for normal text, 4.5:1 for large. Understanding 1.4.6.
- UI & graphics — 1.4.11 Non-text Contrast, AA. 3:1 for the boundaries of buttons, form fields, focus indicators and meaningful graphics. There is no AAA level for this criterion. Understanding 1.4.11.
Where AA contrast is required by law
Contrast is not just a guideline. Across Europe, the harmonised standard EN 301 549 adopts the WCAG Level AA success criteria — including 1.4.3 — and national laws transposing the European Accessibility Act point to it. These are the 13 jurisdictions in our catalogue with such a law:
Austria
reference unverifiedBaFG
Belgium
reference unverifiedLoi du 5.11.2023 (2023046827)
Denmark
reference unverifiedLOV nr 801 af 07/06/2022
Finland
reference unverifiedLaki 306/2019 + asetus 179/2023
France
✓ verifiedCode de la consommation art. L412-13 (ord. 2023-859)
Germany
✓ verifiedBFSG
Ireland
reference unverifiedS.I. No. 636/2023
Italy
✓ verifiedD.Lgs. 82/2022 (attuazione dir. 2019/882)
Netherlands
✓ verifiedImplementatiewet toegankelijkheidsvoorschriften producten en diensten (2024)
Norway
reference unverifiedForskrift om universell utforming av IKT-løsninger
Poland
reference unverifiedUstawa z 26.04.2024 (Dz.U. 2024 poz. 731)
Spain
✓ verifiedLey 11/2023 (+ RD 193/2023)
Sweden
reference unverifiedLag (2023:254)
What we deliberately don’t do: we show no fine amounts — they depend on facts a colour pair can’t reveal, and micro-enterprises are exempt from the service obligations under the EAA. Only Germany’s reference (BFSG) is marked verified — checked against the primary legal text; the others we label unverified rather than overstate. This page is orientation, not legal advice.
One colour pair is a start. Your whole site is more.
Contrast is one of dozens of things a page can get wrong. Point our free scanner at a real URL and it checks the whole page against WCAG 2.2 — contrast included — and tells you what to fix first, with the legal context for the site’s jurisdiction.
Want to check the maths yourself? See what our scanner covers, criterion by criterion.
Other free checkers
Colour blindness simulator
Upload an image, or use the built-in sample, and see it approximated for protanopia, deuteranopia and tritanopia side by side.
Colour converter
Enter a colour in hex, rgb() or hsl() and get all three notations at once, with contrast ratios against black and white.
Colour palette generator
Generate complementary, triadic and other harmonious palettes — every swatch shows its readable text colour, WCAG contrast ratio and AA pass/fail.