WebTools

Developer Tools

Color Contrast Checker

Check text and interface colours against WCAG 2.2 AA and AAA, and get the nearest colour that passes.

By Nitin Raturi · Last reviewed

Input

How to use the Color Contrast Checker

Check whether text and icons are easy enough to read against their background.

  1. Enter the text colour and the background colour.
  2. Read the contrast ratio and which WCAG levels pass.
  3. Check the preview at normal and large sizes.
  4. If it fails, use a suggested colour that keeps the same hue.

Good to know

  • Check both light and dark themes.
  • Tap the ⓘ next to any field for a short guide to it.

Contrast ratio and WCAG 2.2 results for text, large text and interface parts.

Runs in your browser. Nothing you type is uploaded or saved in the link.

Text colour

The colour of the text, icon or border you are checking.

How to fill it in

  • Type #0f766e, rgb(15 118 110) or hsl(175 77% 26%), or use the colour picker.
  • A translucent colour is blended over the background first.

Example

#777777 text on #ffffff has a ratio of 4.47:1, just under 4.5:1.

Background colour

The colour directly behind the text or icon.

How to fill it in

  • Any format above. Use the colour actually behind the text, including any overlay.

Aim for

The WCAG level that suggested colours should reach.

How to fill it in

  • AA normal text (4.5:1) is the usual legal and policy baseline.
  • Large text is at least 24 px, or 18.66 px bold.

Example

To reach 4.5:1, #777777 could become #767676 (4.54:1).

Result

4.54:1

  • Pass AA, normal text (1.4.3), needs 4.5:1
  • Pass AA, large text (1.4.3), needs 3:1
  • Fail AAA, normal text (1.4.6), needs 7:1
  • Pass AAA, large text (1.4.6), needs 4.5:1
  • Pass AA, icons and control borders (1.4.11), needs 3:1

ChangelogHow we test this toolEmbed this tool

How this calculator works

  1. Step 1Undo screen gammaLinear lightEach red, green and blue value becomes the light it really gives off.
  2. Step 2Weigh the channels21% · 72% · 7%Eyes are most sensitive to green, least to blue.
  3. Step 3Compare the two(L1 + 0.05) ÷ (L2 + 0.05)From 1:1 (identical) to 21:1 (black on white).

Contrast is about lightness, not hue. Two very different colours can be equally light and hard to tell apart for people with low vision or colour blindness.

Worked example: a grey that just misses

#777777 on white is 4.47:1, just under the 4.5:1 needed for normal text. #767676 reaches 4.54:1.

#777777 text on #ffffff
Relative luminance
L = 0.2126 R + 0.7152 G + 0.0722 B (linear values)
Contrast ratio
(L lighter + 0.05) ÷ (L darker + 0.05)
  1. Luminance of white1.0000
  2. Luminance of #7777770.1845
  3. Ratio4.4781
  4. Shown as (cut, not rounded)4.47:1
  5. Nearest passing grey#767676, 4.54:1

The ratio is cut to two decimals rather than rounded, so 4.478 shows as 4.47:1 and never looks like it passes 4.5:1.

Reading the result

  • AA (the usual target)4.5:1 · 3:1 largeRequired by most accessibility policies and laws.
  • AAA (enhanced)7:1 · 4.5:1 largeStronger contrast for reading-heavy pages.

Pure red on white is 3.99:1: fine for large headings, too faint for body text.

  • Large textAt least 24 px, or 18.66 px when bold.
  • Icons and bordersNeed 3:1 against what is next to them.
  • Logos and disabled controlsExempt from the contrast rules.
  • Translucent coloursBlended over the background before measuring.

Contrast is checked on the final colours. Converting between formats comes first.

To convert a colour between HEX, RGB, HSL and OKLCH, use the color converter. For hex arithmetic on colour values, try the hex calculator.

Common mistakes

  • Mistake: Checking only the light theme.

    Instead: Check every colour pair in dark mode too.

  • Mistake: Rounding 4.48:1 up to 4.5:1.

    Instead: Treat anything below 4.5:1 as a fail for normal text.

  • Mistake: Using colour alone to show meaning.

    Instead: Add text, an icon or a pattern as well.

Read how we test our calculators, or browse more developer tools.

Frequently asked questions

What contrast ratio do I need?

For WCAG level AA, normal text needs 4.5:1 and large text needs 3:1. Icons and control borders need 3:1. Level AAA asks for 7:1 for normal text.

What counts as large text?

Text at least 24 CSS pixels, or at least 18.66 pixels when bold. That is about 18 point, or 14 point bold.

Why does 4.48:1 fail?

The threshold is a minimum, so anything below 4.5:1 fails for normal text. This checker cuts the ratio to two decimals instead of rounding, so it never shows a failing pair as 4.50:1.

How are suggestions chosen?

They keep your colour’s hue and saturation and change only its lightness, to the nearest value that reaches the level you aim for.

Does it handle transparent colours?

Yes. A translucent text colour is blended over the background first, which is what people actually see.

Sources and methodology

The formulas are standard time-value-of-money results. We check every figure against golden values worked out independently, by closed form and by month-by-month simulation; see the methodology.

Written and maintained by Nitin Raturi, a software engineer (about the author). Last reviewed 27 Oct 2026; next review due by . Found an error? Tell us.

Changelog

  • : Initial release. Demand metrics remain unverified.

  • Color Converter

    Convert colours between HEX, RGB, HSL and OKLCH, with copy-ready CSS and a readable text colour.

  • QR Code Generator

    Make QR codes for links, text, Wi-Fi and contacts in your browser, and download them as SVG or PNG.

  • JSON Formatter & Validator

    Check JSON, see the exact line and column of any error, and format or minify it, all inside your browser.