Contrast Ratio WCAG Checker

Enter a foreground and background color to instantly see the WCAG 2.1 contrast ratio and AA/AAA pass/fail results.

Color Inputs

Live Preview

Normal text — The quick brown fox jumps over the lazy dog.

Large text heading

Contrast Ratio

21:1

Higher is better. Max possible: 21:1

WCAG 2.1 Results

AA — Normal Text

Min 4.5:1

Pass

AA — Large Text

Min 3:1

Pass

AAA — Normal Text

Min 7:1

Pass

AAA — Large Text

Min 4.5:1

Pass

Relative Luminance

Foreground luminance 1.0000
Background luminance 1.0000
Formula (L1+0.05)/(L2+0.05)

Summary

Enter a foreground and background color to instantly see the WCAG 2.1 contrast ratio and AA/AAA pass/fail results.

How it works

  1. Enter or paste the foreground (text) color as a hex, RGB, or HSL value.
  2. Enter the background color in any supported format.
  3. The tool computes relative luminance for each color per WCAG 2.1.
  4. The contrast ratio is derived from the luminance pair using the standard formula.
  5. Results show immediate AA/AAA pass/fail for both normal text (4.5:1 / 7:1) and large text (3:1 / 4.5:1).
  6. A live preview renders sample text on the chosen background so you can judge readability visually.

Use cases

  • Verify UI text meets WCAG 2.1 AA requirements before shipping.
  • Audit existing designs for accessibility compliance.
  • Pick accessible color pairs for buttons, headings, and body copy.
  • Check badge and tag contrast against card backgrounds.
  • Validate icon-on-background contrast for screen reader users.
  • Test error message colors (red text on white) against the AA threshold.

Frequently Asked Questions

Last updated: 2026-06-11 · Reviewed by Nham Vu