No upload, 100% local, no account

WCAG Contrast Checker

Type or pick two colors and see the WCAG contrast ratio instantly, with AA/AAA pass badges for normal and large text.

How Contrast Checker works

The Contrast Checker computes the WCAG 2.x contrast ratio between a foreground and background color and reports whether the pair reaches the AA or AAA level for normal text, large text, and non-text UI components such as icons or focus outlines. Type a hex or rgb() value for each color, or pick with the swatches, and the ratio and a live text preview update instantly.

The math is the same relative-luminance formula used by the contrast section already built into the color converter tool: linearize each sRGB channel, weight them 0.2126/0.7152/0.0722 for red, green and blue, then take the ratio of the lighter to the darker luminance. Everything runs in your browser, so a client's unreleased brand palette or a password-protected design system never leaves your device.

Written by Bastien Sulyan

How to use Contrast Checker, step by step

  1. Enter or pick the foreground (text) color.
  2. Enter or pick the background color.
  3. Read the contrast ratio and the AA/AAA badges for normal text, large text, and non-text UI components.
  4. Use Swap colors to check the pair the other way round.

Common use cases

  • Checking a brand's primary color against white or black before shipping a button component.
  • Verifying that muted gray body text still clears AA on a light card background.
  • Confirming a link color inside a paragraph reaches the 4.5:1 normal-text threshold.
  • Testing whether a large, lighter-weight heading still clears the relaxed 3:1 large-text threshold.

Frequently asked questions

Does the Contrast Checker send my colors to a server?

No. The luminance and ratio math runs as plain JavaScript in your browser tab. The two color values you type or pick are never transmitted anywhere, so unreleased brand colors stay private.

What ratio do I need to pass AA or AAA?

WCAG 2.x sets four thresholds: 4.5:1 for AA normal text, 7:1 for AAA normal text, 3:1 for AA large text, and 4.5:1 for AAA large text. A separate, non-text threshold of 3:1 (WCAG 1.4.11) applies to UI components like icons, borders and focus outlines; it is shown as its own row here.

What counts as "large text" under WCAG?

At least 24px (18pt) at regular weight, or at least about 18.7px (14pt) if the text is bold. Anything smaller is treated as normal text and needs the stricter ratio.

Why does swapping foreground and background not change the ratio?

The ratio formula is symmetric: it only compares the lighter and darker luminance, not which color is used for text. Swapping is still useful because it tells you whether the pair also works with the roles reversed, for example dark text on a light chip versus light text on a dark chip.

Does passing AA guarantee my design is accessible?

No. Contrast is one WCAG success criterion among many. Color choice for people with color vision deficiencies, focus visibility, text resizing and keyboard navigation are separate checks; the color-blindness simulator on this site covers one of them.

Is this an official W3C or WebAIM tool?

No. It implements the public WCAG 2.x contrast formula independently and is not affiliated with the W3C or any other accessibility organization.

Related tools

Keep everything local, explore complementary tools.

All developer tools