Home /Contrast Checker /#FFFFFF on #87CEEB

Color Contrast Checker

Check WCAG accessibility compliance between any two colors. Enter text and background colors below.

The quick brown fox

jumps over the lazy dog. This text is displayed at normal size (16px) to test regular body text readability.

Small text (12px): This is how fine print would appear with these color choices.

Reversed: background as text color

Text Color

Background

Text CSS

Background CSS

Both

Contrast Ratio

1.74

: 1

Poor — Fails WCAG

1:13:14.5:17:121:1

WCAG AA Large

Large text (3:1)

Fail ✗

WCAG AA

Normal text (4.5:1)

Fail ✗

WCAG AAA

Enhanced (7:1)

Fail ✗

WCAG Requirements

AA Large Text (≥18pt bold / 24pt)3:1

AA Normal Text4.5:1

AAA Enhanced7:1

Common Color Pairs

Black on White21:1

White on Black21:1

Dark Grey on Light11.59:1

White on Blue8.59:1

White on Red4:1

Black on Yellow19.56:1

White on Teal4.77:1

White on Purple9.42:1

Black on Amber12.88:1

White on Green2.78:1

Grey on White5.74:1

White on Coral2.73:1

FAQ

What is WCAG color contrast?+

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors to ensure readability for people with visual impairments. The contrast ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).

What contrast ratio do I need?+

For WCAG AA compliance: 4.5:1 for normal text and 3:1 for large text (18pt+ bold or 24pt+ regular). For WCAG AAA (enhanced): 7:1 for normal text and 4.5:1 for large text.

How is contrast ratio calculated?+

Contrast ratio is calculated using the relative luminance of the two colors. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's luminance.

Is color contrast legally required?+

In many jurisdictions, yes. The ADA (Americans with Disabilities Act) and similar laws in other countries require websites to be accessible. WCAG 2.1 Level AA is the most commonly referenced standard.