Home
Free tool

WCAG colour contrast checker

Enter your text and background colours. You see the contrast ratio straight away, whether it passes AA and AAA and, if it doesn't, the closest colour that does.

Contrast ratio

3.25:1

Only for large text and UI components. Too low for body text.

Preview

A large 24px heading

This is how normal body text will read on your page, at 16px.

  • Normal text

    Under 24px, or under 18.66px if bold

    • AA · 4.5:1Fail
    • AAA · 7:1Fail

  • Large text

    24px and up, or 18.66px and up if bold

    • AA · 3:1Pass
    • AAA · 4.5:1Fail

  • UI components and graphics

    Field borders, icons, chart lines

    • AA · 3:1Pass

The closest colour that passes

For AA on normal text (4.5:1), keeping the same hue:

#7277804.50:1
  • WCAG 2.1 formula
  • HEX, rgb(), hsl()
  • Nothing leaves your browser

The ratio is shown to two decimals and never rounded up across a threshold: 4.497 shows as 4.49 and fails.

What it is

What the contrast ratio measures

The contrast ratio compares how bright the text is against its background, from 1:1 (the same colour) to 21:1 (black on white). The WCAG guidelines set minimums so text stays readable for people with low vision, on a phone in the sun or on a cheap screen.

Contrast matters legally too. The European Accessibility Act (Directive 2019/882) has applied since 28 June 2025 to services such as online shops, banking, transport tickets and e-books. Micro-enterprises providing services, with fewer than 10 staff and up to €2 million in turnover, are exempt. Public-sector websites were already covered by Directive 2016/2102. In both cases the benchmark is WCAG 2.1 level AA.

How it works

  1. 1

    Enter the two colours

    In HEX, rgb() or hsl(), or pick them. The swap button switches text and background.

  2. 2

    We work out the luminance

    With the WCAG 2.1 relative luminance formula for each colour, then the ratio between them.

  3. 3

    We check the thresholds

    4.5:1 for normal text (AA), 3:1 for large text and UI components, 7:1 and 4.5:1 for AAA.

  4. 4

    We suggest a fix

    If it fails, we find the closest text colour of the same hue that passes, and you apply it with one tap.

Why do it

Why check your contrast

  • More people can read you

    Around one in twelve men has some form of colour blindness, and everyone's eyesight fades with age. Grey text on white loses these readers first.

  • On a phone, outdoors

    Sunlight washes out a screen. A button that looks fine at your desk may disappear on the street.

  • Less legal risk

    Low contrast is one of the most common accessibility failures, and one of the easiest to fix.

What we check

WCAG's three colour thresholds

WCAG 2.1 success criteria 1.4.3, 1.4.6 and 1.4.11, for text of every size and for the parts of a page people need to see to use it.

  • Normal text

    Paragraphs, menus and forms.

    • AA: at least 4.5:1
    • AAA: at least 7:1
    • Under 24px, or 18.66px if bold

  • Large text

    Headings and large buttons.

    • AA: at least 3:1
    • AAA: at least 4.5:1
    • 24px and up, or 18.66px if bold

  • UI components

    Things that aren't text but must be visible.

    • AA: at least 3:1 against adjacent colours
    • Field and button borders
    • Icons and chart lines
FAQ

About contrast and WCAG

What contrast do I need?

For most sites the target is WCAG 2.1 level AA: 4.5:1 for normal text, 3:1 for large text and for UI components such as field borders and icons. AAA (7:1) is stricter and good for long reading, but no law requires it across a whole site.

Does the European Accessibility Act apply to my website?

Since 28 June 2025 it applies to specific consumer services: e-commerce, banking, electronic communications, e-books and transport services such as ticketing. If you sell online, it very likely concerns you. Micro-enterprises providing services (fewer than 10 people and up to €2 million turnover) are exempt. An informational website for a clinic or office is usually out of scope, but good contrast makes it easier for everyone to use.Free check of your website

What counts as large text?

Under WCAG, large text is at least 18pt (about 24px) at regular weight, or at least 14pt (about 18.66px) in bold. Anything smaller is normal text and needs 4.5:1.

How do you find the suggested colour?

We keep the hue of your text colour and change only its lightness in the OKLCH colour space, as little as possible, until it passes. So blue stays blue, just darker or lighter. If the background makes that impossible, we tell you.

What about semi-transparent colours?

If you enter a colour with transparency, such as rgba() or an eight-digit HEX, we calculate the colour that actually shows on the background, as the reader sees it. A semi-transparent background is calculated on white.

Contrast is one of many things we check

We build websites that read comfortably on any screen and follow WCAG 2.1 AA from the start, not as a last-minute fix.

Talk to us