Skip to content

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.

Foreground (text) colour

rgb(26, 26, 46) · hsl(240, 28%, 14%)

Background colour

rgb(255, 255, 255) · hsl(0, 0%, 100%)

Contrast ratio

17.06 : 1

Passes AA and AAA for normal text.

WCAG pass or fail for the current contrast ratio of 17.06 to 1, by text size and conformance level
Text / elementLevel AALevel AAA
Normal textbelow 24px (or 18.66px bold)PassPass
Large text≥24px, or ≥18.66px (14pt) boldPassPass
UI & graphicsicons, borders, chart parts (1.4.11)PassNot 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.

Button / UI element

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 unverified

    BaFG

  • Belgium

    reference unverified

    Loi du 5.11.2023 (2023046827)

  • Denmark

    reference unverified

    LOV nr 801 af 07/06/2022

  • Finland

    reference unverified

    Laki 306/2019 + asetus 179/2023

  • France

    ✓ verified

    Code de la consommation art. L412-13 (ord. 2023-859)

  • Germany

    ✓ verified

    BFSG

  • Ireland

    reference unverified

    S.I. No. 636/2023

  • Italy

    ✓ verified

    D.Lgs. 82/2022 (attuazione dir. 2019/882)

  • Netherlands

    ✓ verified

    Implementatiewet toegankelijkheidsvoorschriften producten en diensten (2024)

  • Norway

    reference unverified

    Forskrift om universell utforming av IKT-løsninger

  • Poland

    reference unverified

    Ustawa z 26.04.2024 (Dz.U. 2024 poz. 731)

  • Spain

    ✓ verified

    Ley 11/2023 (+ RD 193/2023)

  • Sweden

    reference unverified

    Lag (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

All free checkers