Skip to contentSellstamp
Get started

Contrast checker

Check the contrast between text and background colours against WCAG 2.2 AA and AAA, with a live preview and the exact ratio.

Large text

Normal body text looks like this.

Contrast ratio
4.54 : 1
AA normal text (4.5)
Pass
AA large text (3)
Pass
AAA normal text (7)
Fail
AAA large text (4.5)
Pass
UI components (3)
Pass

Stays on your device

Everything runs in your browser. Nothing you type is sent to Sellstamp or anyone else.

Building something to sell?

Sellstamp has a storefront, a checkout into your own payment account, automatic delivery and an API with webhooks. Open a free store

How to use it

  1. Enter the text colour and the background colour.
  2. Read the ratio and which levels it passes.
  3. Adjust until the level you need passes.

Nothing you paste leaves this page

The conversion runs in this browser tab. Nothing is sent to Sellstamp or anyone else, which matters for configuration files, customer exports and tokens.

The thresholds

WCAG 2.2 asks for a contrast of at least 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold) at level AA, 7:1 and 4.5:1 at AAA, and 3:1 for interface components and meaningful graphics. The ratio uses the WCAG relative luminance formula; for example #767676 on white is 4.54:1, just passing AA.

Questions

What contrast ratio do I need?

4.5:1 for normal text and 3:1 for large text to meet WCAG AA, which most accessibility laws reference.

What counts as large text?

Roughly 24 px regular or 19 px bold and larger.

Does it check transparent colours?

Use solid colours: transparency depends on what is behind, which this tool cannot know.

Is WCAG 3’s APCA used?

No. WCAG 2.2 is the current standard; APCA is a draft for a future version.

Related tools

Popular free tools

All developer toolsEvery free tool