What is a good colour contrast ratio?

For normal body text, aim for a contrast ratio of at least 4.5:1 to meet WCAG Level AA. Large text (24px and up, or 18.66px and up if bold) needs at least 3:1. To meet the enhanced Level AAA, normal text needs 7:1 and large text needs 4.5:1.

What counts as large text in WCAG?

Large text is text that is at least 24 CSS pixels (about 18pt), or at least 18.66 CSS pixels (about 14pt) when it is bold. Anything smaller is treated as normal text and must meet the higher 4.5:1 ratio.

How is the contrast ratio calculated?

Each colour is converted from sRGB to a relative luminance: the channels are linearised, then weighted (0.2126 red, 0.7152 green, 0.0722 blue). The ratio is (lighter + 0.05) divided by (darker + 0.05), giving a value between 1:1 and 21:1. This checker uses that exact WCAG formula.

Do icons and form borders need to pass contrast?

Yes. Non-text elements that convey information, such as icons, input borders, focus indicators and chart segments, must meet a contrast ratio of at least 3:1 against their adjacent colours, under WCAG 1.4.11 Non-text Contrast.

Is passing a contrast check enough to be compliant?

No. Contrast is one success criterion among many. It is the single most common failure online, so it is a sensible place to start, but a site also needs keyboard operability, alt text, labels, headings and more. Use the WCAG checklist for the full picture.

Free tool

Color Contrast Checker

Enter any two colours and see the WCAG contrast ratio straight away, with clear pass or fail results for AA and AAA. Low-contrast text is the most common accessibility failure on the web, so it is a good place to start. Everything runs in your browser; nothing is sent anywhere.

Choose your colours

Foreground / text colour

Background colour

Live preview

Large sample text

Normal sample text. The quick brown fox jumps over the lazy dog, again and again, to show how readable this pairing is at a body-copy size.

#1E1B4B#FBFCFE

Contrast ratio

15.57: 1

AA — normal text
Needs 4.5:1. Body text below 24px (or below 18.66px bold).
Pass
AA — large text
Needs 3.0:1. Text 24px and up, or 18.66px and up if bold.
Pass
AAA — normal text
Needs 7.0:1. The enhanced bar for body text.
Pass
AAA — large text
Needs 4.5:1. The enhanced bar for large text.
Pass
UI & graphics
Needs 3.0:1. Icons, borders, focus rings and other non-text elements.
Pass

Large text means 24px and above, or 18.66px (14pt) and above if bold. Everything smaller counts as normal text.

How it works

Contrast ratios and the WCAG thresholds

A contrast ratio measures how much a colour stands out against the colour behind it. It runs from 1:1 (identical, invisible) to 21:1 (pure black on pure white). WCAG works it out by converting each colour from sRGB to a relative luminance, then comparing the two: the ratio is (lighter + 0.05) divided by (darker + 0.05). This checker uses that exact formula. WCAG 2.2

WCAG sets different thresholds depending on what the colour is used for:

AA, normal text: 4.5:1. Body text below 24px, or below 18.66px when bold. This is the level almost every accessibility law requires.
AA, large text: 3:1. Text 24px and up, or 18.66px and up if bold.
AAA, normal text: 7:1 and AAA, large text: 4.5:1. The enhanced bar, not usually required across a whole site.
UI and graphics: 3:1. Icons, input borders, focus rings and other meaningful non-text elements (WCAG 1.4.11).

Why start here? In the WebAIM Million 2025 analysis of the top million home pages, low-contrast text was the single most common failure, found on 79.1% of home pages. It is widespread, easy to detect and usually straightforward to fix. WebAIM Million

Contrast is a start, not the finish line

Passing contrast does not make a page compliant on its own. It is one of dozens of WCAG success criteria. Use the WCAG 2.2 AA checklist for the full set, and read what WCAG is if any of the terms are new.

FAQ

From a quick check to full compliance

What is WCAG?

The standard behind every contrast rule, explained in plain English.

Accessibility basics

Start here for the bigger picture on web accessibility compliance.

WCAG 2.2 checklist

The free, plain-English checklist covering all 55 Level AA criteria.

Accessibility guides

Plain-English how-tos for the issues a contrast tool cannot catch.

Get the WCAG checklist Browse the guides

This is guidance, not legal advice

This tool helps you check colour contrast against WCAG, but it is guidance, not legal advice, and passing it does not guarantee compliance. For decisions specific to your organisation, confirm with the official sources we link or a qualified adviser.

Sources

[1]Web Content Accessibility Guidelines (WCAG) 2.2 (W3C Recommendation)retrieved 9 Jun 2026
[2]The WebAIM Million 2025 (annual accessibility analysis of the top 1,000,000 home pages)retrieved 9 Jun 2026

The Accessibility Brief

Subscribe to The Accessibility Brief

We watch the standards so you don't. Plain-English WCAG, EAA and ADA updates, free.

No spam. Unsubscribe anytime.