Your data is never sent to a server or stored anywhere. All processing happens in your browser.

Color Contrast Checker

Large sample text

This is normal body text used to preview the contrast between your two colors.

Contrast Ratio

18.88:1

WCAG AA — Normal text

Minimum 4.5:1

Pass

WCAG AA — Large text

Minimum 3:1

Pass

WCAG AAA — Normal text

Minimum 7:1

Pass

WCAG AAA — Large text

Minimum 4.5:1

Pass

WCAG 2.1 — UI components & graphics

Minimum 3:1

Pass

How to Use

Pick or type a hex code for both the foreground (text) and background colors. The contrast ratio updates instantly, and each WCAG criterion shows whether the combination passes or fails. Use the "Swap colors" button to reverse the pair. A live preview of large and normal text lets you see the visual result before committing to the colors.

What Is Contrast Ratio

Contrast ratio is a number between 1:1 (no contrast) and 21:1 (maximum — pure black on pure white) defined by WCAG (Web Content Accessibility Guidelines). It is calculated from the relative luminance of the two colors, then expressed as (lighter + 0.05) / (darker + 0.05). Higher ratios are easier to read, especially for users with low vision or in bright environments.

WCAG Thresholds

WCAG 2.1 defines minimum contrast ratios by text size and conformance level. AA is the standard most sites target; AAA is stricter and often required for government or medical sites. Normal text is below 18pt (or 14pt bold); large text is 18pt+ (or 14pt bold+). AA Normal requires 4.5:1, AA Large requires 3:1. AAA Normal requires 7:1, AAA Large requires 4.5:1. WCAG 2.1 additionally requires 3:1 for UI components, icons, and graphical elements that convey meaning.

Common Use Cases

  • Designers verifying accessible color pairs before committing to a palette.
  • Developers checking contrast for buttons, links, and form fields during implementation.
  • Content editors verifying that pull quotes, callouts, and decorative text remain legible.
  • Accessibility auditors producing WCAG conformance reports.
  • Product managers confirming design-system tokens meet AA or AAA requirements.

Tips

  • If AA Normal fails, darken the text or lighten the background until the ratio reaches 4.5:1.
  • Pure black (#000) on pure white (#fff) gives the maximum ratio of 21:1.
  • Decorative text (logos, incidental text) is exempt from WCAG contrast rules, but intentional content is not.
  • Icons that convey information count as "UI components" and need 3:1 contrast against their adjacent background.
  • Both 3-digit (#fa0) and 6-digit (#ffaa00) hex formats are accepted.

Privacy

All contrast calculations happen in your browser. Your color values are never sent to any server or stored anywhere.