Sifency Tools
Let’s Talk

WCAG contrast checker

Enter two colours and see at once whether they pass WCAG AA and AAA. Everything runs in your browser.

Contrast ratio

Passes: AA normal text, AA large text, AAA large text, UI and graphics.

Large text, 24 px bold

Normal text at 16 px. The quick brown fox jumps over the lazy dog, and the contrast should be easy to read.

Button

Colour-blindness preview

How the pair may look with each type of colour vision, and whether normal text still passes AA. This is an approximation for design checks, not a medical test.

  • Aa Sample textProtanopiaNo red-sensitive cones.4.51:1AA pass
  • Aa Sample textDeuteranopiaNo green-sensitive cones.5.40:1AA pass
  • Aa Sample textTritanopiaNo blue-sensitive cones.4.75:1AA pass
  • Aa Sample textAchromatopsiaNo colour vision, only light and dark.5.65:1AA pass

rgb(65, 80, 245) · hsl(235, 90%, 61%)

rgb(255, 255, 255) · hsl(0, 0%, 100%)

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

Contrast ratio 5.68 to 1. Passes: AA normal text, AA large text, AAA large text, UI and graphics.

Example: Indigo on white

Fix suggestions

Already at 4.50:1 or better. Nothing to fix.

How it works

  1. Enter two colours

    Type a hex, rgb or hsl value, use the colour picker, or pick any pixel on your screen where the browser supports it.

  2. Read the verdict

    The ratio and five badges update as you type. Each badge says pass or fail for one WCAG level.

  3. Check the specimen

    See your colours as normal text, large text, a button outline and an icon, exactly as a visitor would.

  4. Fix a failing pair

    Pick a target ratio and apply the closest passing colour. Only lightness changes, so your hue stays recognisable. A colour-blindness preview shows how the pair holds up for other eyes.

  5. Share or compare

    Copy the result as text, CSS or an image, or copy a link that opens the same colours. Switch to grid mode to compare up to eight colours at once.

Questions about contrast

What contrast ratio do I need to pass WCAG?

Normal text needs at least 4.5 to 1 for level AA and 7 to 1 for level AAA. Large text needs 3 to 1 for AA and 4.5 to 1 for AAA. Buttons, input borders and icons need 3 to 1.

What counts as large text?

WCAG treats text as large from 24 CSS pixels, or from about 18.7 CSS pixels when it is bold. Anything smaller is normal text and needs the higher ratio.

Why does a ratio of 4.49 fail when it looks like 4.5?

WCAG does not allow rounding up. This checker shows the ratio rounded down to two decimals, so a pair that falls short never appears to pass.

Are my colours uploaded anywhere?

No. The calculation runs in your browser and nothing you enter leaves your device.

What happens with transparent colours?

A transparent foreground is blended over the background, and a transparent background is blended over white, before the ratio is calculated. The page tells you when this happens.

Next step

Put your colours on a favicon

Once your brand colours pass, turn one of them into a favicon and app icon set, with the manifest and the HTML to paste, in a single ZIP.

Make a favicon
View all tools
Colour Placeholder GeneratorExact-size placeholder images in any colour, named for you.Open toolPalette from ImageDrop an image, get a palette you can paste into code.Open toolFavicon and App Icon GeneratorOne image in, every icon and the HTML snippet out.Open toolDevice Mockup GeneratorPut a screenshot in a clean device frame in seconds.Open tool

About these tools

Small tools, made by Sifency

Sifency is a small studio that builds themes, plugins and web apps. These tools began as the things we kept needing ourselves, so we tidied them up and left them open for everyone. There is nothing to sign up for.