N

Runs in your browser · nothing is uploaded

Color Contrast Checker

Use this color contrast checker to see whether your text and background colors meet WCAG 2.2 AA and AAA — using the W3C formulas, exact thresholds, transparency handling and the closest colors that pass.

Colors

Accepts hex (#rgb, #rrggbb, with optional alpha), rgb()/rgba(), hsl()/hsla() and CSS color names.

Contrast ratio

Contrast 4.83 to 1

4.83:1

L(text) = 0.1672 · L(background) = 1.0000 · (1.0000 + 0.05) ÷ (0.1672 + 0.05)

  • AA · normal text SC 1.4.3 · needs 4.5:1Pass
  • AA · large text SC 1.4.3 · needs 3:1Pass
  • AAA · normal text SC 1.4.6 · needs 7:1Fail
  • AAA · large text SC 1.4.6 · needs 4.5:1Pass
  • Non-text (icons, borders, focus) SC 1.4.11 · needs 3:1Pass

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

Large text, 24px (18pt)

Large bold text, 18.66px (14pt bold)

Icon and border (non-text)

Closest passing colors

  • AAA (7:1)

A passing ratio covers one pair of colors. It doesn't make a page accessible on its own — font weight and size, focus indicators, text over images and many other WCAG criteria still apply.

The W3C formulas

  • Linearise each channelc = v/255; c ≤ 0.04045 ? c/12.92 : ((c+0.055)/1.055)^2.4
  • Relative luminanceL = 0.2126 R + 0.7152 G + 0.0722 B
  • Contrast ratio(L_lighter + 0.05) ÷ (L_darker + 0.05)

From the definitions of relative luminance and contrast ratio in WCAG 2.2 (checked 6 October 2026).

Worked examples

Black on white: (1 + 0.05) ÷ (0 + 0.05) = 21:1. Any color on itself: 1:1. #777777 on white is 4.48:1 — it fails AA for normal text; #767676 is 4.54:1 and passes.

Frequently asked questions

What contrast ratio do I need?+

Under WCAG 2.2: at least 4.5:1 for normal text and 3:1 for large text at level AA (success criterion 1.4.3); 7:1 and 4.5:1 at level AAA (1.4.6). Icons, input borders, focus indicators and other user-interface graphics need 3:1 against adjacent colors (1.4.11).

What counts as large text?+

At least 18 point (24 CSS px) regular, or 14 point (about 18.66 CSS px) bold.

How is the ratio calculated?+

Each color's relative luminance is worked out with the W3C formula — the sRGB channels are linearised and weighted 0.2126 red, 0.7152 green, 0.0722 blue. The ratio is (lighter + 0.05) ÷ (darker + 0.05), from 1:1 to 21:1.

Why does 4.48 fail when it's so close to 4.5?+

WCAG thresholds are exact. The checker compares the unrounded ratio and shows two decimals rounded down, so a ratio that fails is never displayed as 4.50.

How are transparent colors handled?+

A transparent background is first blended onto the page color behind it (white unless you change it), then the text color is blended onto that result — the colors a reader actually sees.

What's the lightest gray text that passes on white?+

#767676, at 4.54:1 — the lightest gray that meets AA for normal text on a white background. One step lighter, #777777, is 4.47:1 and fails.

What does the checker suggest when my colors fail?+

Under “Closest passing colors” it shows the nearest text color, and the nearest background color, that reach 4.5:1 and 7:1 — found by mixing the color toward black or white, then rechecking the rounded hex value. For example, #999999 text on white is only 2.84:1; the closest passing text colors are #767676 for AA and #595959 for AAA.

Which color formats can I enter?+

Hex (#rgb or #rrggbb, with optional alpha as #rgba or #rrggbbaa), rgb() and rgba(), hsl() and hsla() in comma or space syntax, and CSS color names such as navy or rebeccapurple. Use Swap to switch the text and background colors.

Do logos and disabled buttons need to meet contrast requirements?+

No. WCAG 1.4.3 exempts text that's part of a logo or brand name, text in inactive (disabled) controls, purely decorative text, invisible text and text inside a picture that contains significant other visual content. Placeholder text and visible labels are not exempt.

Do I need level AA or AAA?+

AA is the level most accessibility laws, policies and procurement standards point to, usually through WCAG 2.1 or 2.2 AA. AAA is stricter and isn't required for whole sites, but meeting 7:1 for body text is a good goal where your design allows it.

If my colors pass, is my site accessible?+

No. Contrast is one success criterion among many. Text over images or gradients, focus visibility, font weight, motion, keyboard access and structure all matter too.

More free Northlane tools