Contrast Checker

Check the WCAG contrast ratio between any two colors — enter exact values or use the swatches below.

Heading at 24px — large text only needs 3:1

Body copy at 16px is what the 4.5:1 AA threshold protects. The quick brown fox jumps over the lazy dog.

Caption text at 12px — small type is where weak contrast hurts first.

An inline link, underlined so color isn't its only signal

Normal text

AA AAA

Large text (18pt+)

AA AAA

UI components & graphics (3:1 minimum, WCAG 1.4.11)

Text luminance: Background luminance: Formula: (L_lighter + 0.05) / (L_darker + 0.05)

Under color vision deficiencies

Simulated with the same matrices as the color blindness simulator. Luminance contrast mostly survives CVD — but if these previews look alike, don't rely on the hue difference to carry meaning.

Text color

#

Background color

#

Make it pass

Same hue and saturation as your text color, lightness adjusted just enough:

Export the pair

How WCAG contrast is measured

WCAG defines contrast as a ratio between 1:1 (identical colors) and 21:1 (pure black on pure white), based on each color's relative luminance. Level AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold). Level AAA raises that to 7:1 and 4.5:1 respectively. Relative luminance itself weights the channels unevenly — green contributes about 71% of perceived brightness, red 21%, blue only 7% — which is why a saturated blue and a saturated green at the "same" HSL lightness produce wildly different ratios. The full derivation is in our WCAG contrast guide.

Mistakes this tool catches constantly

The most common failure isn't exotic: it's light gray text on white. Anything lighter than #767676 on a white background is already below 4.5:1 — and an enormous amount of "subtle" placeholder and caption text lives well above that. Second most common: testing the headline and assuming the body passes too, when the thresholds differ (3:1 vs 4.5:1). Third: treating a passing ratio as the whole job — a pair can pass AA and still be indistinguishable to red-green color blindness when hue is the only difference between states, which is exactly what the simulation strip above is for.

Frequently asked questions

WCAG AA (the level most legal accessibility requirements reference) requires at least 4.5:1 for normal-size body text.

No — the ratio is symmetric. Swapping foreground and background gives the exact same ratio, since it is based on the relative luminance of both colors regardless of role.

No. WCAG explicitly exempts logos and brand names, purely decorative text, and inactive (disabled) UI components from the contrast requirements. Everything a user actually needs to read or operate, however, is covered.

APCA is a perceptual contrast method being developed for the draft WCAG 3 guidelines. It often grades pairs differently than WCAG 2.x, especially for dark backgrounds and thin fonts — but it is not yet a normative standard, and current legal and procurement requirements reference WCAG 2.x ratios. This tool implements the current normative standard; the ratios it shows are the ones audits check today.

Whichever you have more freedom to change. The tool's suggestions adjust the text color's lightness while keeping its hue, which usually preserves the design intent, but darkening a background works exactly as well — the ratio only cares about the luminance gap between the two.