Skip to content
Typography Master

WCAG Contrast Checker

Test foreground and background color combinations against WCAG accessibility standards. Verify contrast ratios for normal text, large text, and UI components before you ship.

Contrast Checker

Large text: ≥24px regular or ≥18.66px bold

10.31:1Normal text
AA normal: PassAAA normal: PassAA large: PassAAA large: Pass

Heading preview

Body text preview at your chosen size and weight. Good contrast keeps reading comfortable on every screen and in bright environments.

Excellent — this pair passes WCAG AAA for normal text.

What this contrast checker does

This WCAG contrast checker tests text and background color combinations against accessibility standards. Verify AA and AAA compliance for normal and large text before shipping UI or marketing pages.

How to use it

  1. Enter or pick foreground (text) and background colors using the color inputs.
  2. Review the contrast ratio and whether the pair passes WCAG AA and AAA thresholds.
  3. Check both normal text and large text (18px+ or 14px+ bold) results.
  4. Adjust colors until you meet at least AA for body copy — 4.5:1 for normal text.
  5. Read the Typography Accessibility chapter for spacing and sizing guidelines beyond contrast.

For deeper context, read the Typography Accessibility chapter in the Typography Master guide.

Frequently asked questions

What contrast ratio is required for WCAG AA?
Normal text needs a contrast ratio of at least 4.5:1 against its background. Large text (18px+ regular or 14px+ bold) needs at least 3:1 for WCAG AA compliance.
What is the difference between WCAG AA and AAA?
AA is the standard legal target for most products — 4.5:1 for normal text. AAA requires 7:1 for normal text and is recommended for critical healthcare or government content.
Does color contrast affect SEO?
Contrast is not a direct ranking factor, but poor contrast increases bounce rates and fails accessibility audits. Readable text supports user engagement signals and inclusive design.

Related resources