WCAG Color Contrast Checker

Foreground (text) Hex

Background Hex

Contrast Ratio

—

WCAG AA (normal text)

—

WCAG AA (large text)

—

WCAG AAA (normal text)

—

Formula: Contrast Ratio = (L1 + 0.05) / (L2 + 0.05) where L = relative luminance

Color Contrast Checker

Color contrast is critical for web accessibility. Insufficient contrast makes text difficult to read for people with visual impairments.

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05) where L = relative luminance

The WCAG algorithm calculates relative luminance of each color, then computes the ratio between the lighter and darker values.

#333333 on #FFFFFF = 12.63:1 (AAA Pass)

Dark gray on white has excellent contrast

#777777 on #FFFFFF = 4.48:1 (AA Fail for normal text)

Medium gray on white fails AA for normal text

What is WCAG?

Web Content Accessibility Guidelines — standards for making web content accessible to people with disabilities.

What contrast ratio is needed for WCAG AA?

4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold).

What contrast ratio is needed for WCAG AAA?

7:1 for normal text, 4.5:1 for large text.

What is the maximum contrast ratio?

21:1 (black on white or white on black).