WCAG AAA#000000 on #FFFFFF
21:1
Sample text to test contrast ratio. Check two colors against WCAG AA and AAA so your text is readable for all users.
Foreground (text)
Background
AA 4.5:1 · AAA 7:1WCAG 2.1
- AA · Normal text4.5:1PASS
- AA · Large text3.0:1PASS
- AAA · Normal text7.0:1PASS
- AAA · Large text4.5:1PASS
The quick brown fox jumps over the lazy dog.
Normal text (14pt)
Needs 4.5:1 for AA and 7.0:1 for AAA. This pair is 21:1, so it passes both.
The quick brown fox jumps over the lazy dog.
Large text (18pt)
Needs 3.0:1 for AA and 4.5:1 for AAA. This pair is 21:1, so it passes both.
How it works
Check any foreground and background pair against WCAG 2.1 AA and AAA, with the exact ratio and what it passes for.
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
4 questions people ask about the color contrast checker.
1What 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.
2What 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.
3Does 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.
4How 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.