WCAG Contrast Checker

Check text and background color contrast ratio against WCAG 2.1 accessibility standards. Ensure your typography is readable for all users.

Contrast Ratio

:1

AA Normal Text (4.5:1)
AA Large Text (3:1)
AAA Normal Text (7:1)
AAA Large Text (4.5:1)

Live Preview

Large Text Preview (24px+ bold)

Large Text Preview (18.66px+ bold)

Normal body text at 16px. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Small text at 14px. This size is commonly used for secondary content, captions, and metadata.

Fine print at 12px. Legal text, footnotes, and disclaimers often use this size.

How It Works

Contrast ratio is calculated using the WCAG 2.1 relative luminance formula:

L = 0.2126 * R + 0.7152 * G + 0.0722 * B
where R, G, B are linearized sRGB values:
  if sRGB <= 0.04045: linear = sRGB / 12.92
  else:            linear = ((sRGB + 0.055) / 1.055) ^ 2.4

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
  where L1 = lighter, L2 = darker

Related Typography Terms

Legibility Accessibility (Typography) WCAG Typography Contrast Ratio

Learn More

Accessibility
Accessible Typography: The Complete Guide

Typography accessibility isn't just about contrast ratios — it's about font choice, sizing, spacing, and respecting user preferences.