tigtools

Contrast Checker

Enter a text colour and a background colour to see the WCAG contrast ratio, which levels pass, and a live preview.

Runs in your browser No sign-up

Contrast ratio

4.47:1

RequirementNeedsResult
AA, normal text4.5:1Fail
AA, large text3:1Pass
AAA, normal text7:1Fail
AAA, large text4.5:1Fail
UI components and graphics3:1Pass

Large text means at least 24px (18pt) regular or 18.66px (14pt) bold.

Preview

Normal text at 16px. The quick brown fox jumps over the lazy dog.

Small text at 14px is harder to read with low contrast.

Large text at 24px

Bold text at 18.66px (14pt)

Button

Nearest passing text colour

Target
#767676 reaches 4.54:1 against this background.

Transparent text is blended over the background before measuring; a transparent background is blended over white.

How to use it

  1. Enter the text (foreground) colour and the background colour as HEX, rgb(), hsl() or another CSS format, or use the pickers.
  2. Read the contrast ratio and the pass or fail result for each WCAG requirement.
  3. If a requirement fails, choose a target and apply the suggested colour, which keeps the hue and changes only lightness.
  4. Use “Swap” to check the reverse combination, for example light text on a dark button.

How it works

The ratio follows the WCAG 2.2 definition: each colour's relative luminance is calculated from its sRGB channels, and the ratio is (lighter + 0.05) ÷ (darker + 0.05). It ranges from 1:1 (identical colours) to 21:1 (black on white).

Requirements checked: success criterion 1.4.3 (AA) needs 4.5:1 for normal text and 3:1 for large text; 1.4.6 (AAA) needs 7:1 and 4.5:1; 1.4.11 needs 3:1 for user-interface parts and meaningful graphics such as input borders and icons. Large text is at least 24px regular or about 18.66px bold. WCAG does not allow rounding up, so 4.49:1 fails AA even though it is close; the ratio shown here is truncated, not rounded.

The suggestion keeps the text colour's hue and chroma in OKLCH and searches the nearest lightness, darker or lighter, that meets the target. Contrast ratio is one part of readability: font weight, size, and colour vision differences also matter, and WCAG 2.2 is the current W3C recommendation that most accessibility laws refer to.

Examples

Grey text that almost passes

#777777 on white gives 4.48:1. That passes for large text and UI components but fails AA for normal text. The nearest passing grey is about #767676, which reaches 4.54:1.

White text on a brand button

White on #ff8800 gives about 2.4:1, which fails even the 3:1 large-text level. Darkening the orange or using dark text instead are the usual fixes; the suggestion shows how dark the text colour would need to be.

Checking a form field border

A light grey border #cccccc on white is about 1.6:1. Under criterion 1.4.11 the border that identifies an input needs 3:1, so something around #949494 or darker is needed.

Frequently asked questions

What contrast ratio do I need for WCAG AA?

4.5:1 for normal body text, 3:1 for large text (24px, or 18.66px bold) and 3:1 for UI components and meaningful graphics. AAA raises text to 7:1 and large text to 4.5:1.

Does logo text or disabled button text need to pass?

No. WCAG exempts text in logos and brand names, purely decorative text and text in inactive (disabled) user-interface components.

Why does my result differ slightly from another checker?

Some tools round the ratio to one decimal or round it up. WCAG compares the exact value, so this tool truncates to two decimals. Tiny differences can also come from colours entered with alpha.

What about the new APCA contrast method?

APCA is a different method proposed for a future WCAG version. It is not part of WCAG 2.2, which is what this tool measures and what current accessibility rules reference.

Privacy

The colours are checked in your browser. Nothing is uploaded or stored.