Color Contrast Checker

Check WCAG color contrast compliance for accessibility

Verify color contrast ratios meet WCAG accessibility standards (AA and AAA levels). Test foreground and background color combinations for readability. Perfect for ensuring your website is accessible to users with visual impairments. See contrast ratios and pass/fail results for text and UI elements.

Select Colors

Contrast Preview

Large Text Example

Regular Large Text (18pt+)

Normal Text Example

Small Text (14pt)

Contrast Ratio
21:1

WCAG Compliance

Normal Text - AA
-
Minimum contrast: 4.5:1
Normal Text - AAA
-
Minimum contrast: 7:1
Large Text - AA
-
Minimum contrast: 3:1 (18pt+ or 14pt+ bold)
Large Text - AAA
-
Minimum contrast: 4.5:1

About WCAG Standards

• Level AA: Minimum legal requirement for most websites (ADA, Section 508)

• Level AAA: Enhanced standard for maximum accessibility

• Large Text: 18pt (24px) regular or 14pt (18.66px) bold or larger

• Normal Text: All other text sizes

How to Use

  1. 1 Select or enter your foreground (text) color
  2. 2 Select or enter your background color
  3. 3 See contrast ratio calculated instantly
  4. 4 Check if combination passes WCAG AA or AAA standards
  5. 5 Use for accessible web design, UI compliance, or improving readability