Color Contrast Checker

What the thresholds mean

WCAG AA needs 4.5:1 for body text and 3:1 for large text, which means 18pt and up, or 14pt bold and up. AAA raises those to 7:1 and 4.5:1. Interactive elements and meaningful icons need 3:1 against what sits behind them.

The ratio runs from 1:1 for identical colors to 21:1 for pure black on pure white. It is computed from relative luminance, not from how different the hues are, which is why two vivid colors can look distinct and still fail.

Fixing a failing pair

Change lightness, not hue. Darkening the foreground or lightening the background moves the ratio directly, while shifting hue barely moves it at all. If a brand color cannot pass as text, keep it for fills and borders and use a dark neutral for the words on top.

Frequently asked

What contrast ratio does WCAG AA require?

4.5:1 for normal body text and 3:1 for large text, which is 18pt and above or 14pt bold and above. Non-text elements such as form borders and icons need 3:1.

What is the difference between WCAG AA and AAA?

AAA is the stricter level: 7:1 for body text and 4.5:1 for large text, against AA's 4.5:1 and 3:1. Most products target AA, since AAA rules out a large share of brand colors.

Does contrast ratio account for color blindness?

Partly. The ratio is based on luminance, so a pair that passes will usually stay legible under color vision deficiency. It does not cover using hue alone to carry meaning, which needs a second cue such as an icon or label.

How do I fix failing contrast without changing my brand color?

Keep the brand color for backgrounds, fills, and borders, and pick a darker or lighter variant from its own scale for text. A tint-and-shade scale usually contains a passing step already.