Audit Web Pages for WCAG Compliance

Verify your site's text colors meet WCAG AA or AAA contrast standards for accessibility.

Nid oes angen mewngofnodi

Text color

Background color

Large heading text

Medium body text (18px) for reading and content.

Normal body text (16px) for paragraphs.

Small body text (14px) for captions and metadata.

14.63:1

Contrast ratio

✓WCAG AA — Normal text

Requires 4.5:1 · You have 14.63:1

✓WCAG AA — Large text

Requires 3.0:1 · You have 14.63:1

✓WCAG AAA — Normal text

Requires 7.0:1 · You have 14.63:1

✓WCAG AAA — Large text

Requires 4.5:1 · You have 14.63:1

✓UI components / graphical objects

Requires 3.0:1 · You have 14.63:1

Quick presets

Based on WCAG 2.1 contrast guidelines. Large text = 18pt (24px) normal or 14pt (18.66px) bold. Hex codes update in both directions: type a hex or pick a color, both inputs stay in sync.

WCAG Audit tips

♿

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+/24px+ or 14pt+/18.66px+ bold). Run every text/background combo through this check before launching.

💡

AAA is the higher target (7:1 normal, 4.5:1 large). Most consumer products aim for AA — AAA is required for some government and accessibility-focused sites.

🎯

Common failure: gray text (#9ca3af) on white only hits 2.9:1. The tool suggests slate-700 (#374151) or darker for AA passes.

📋

The "UI components" pass (3:1) applies to icons, form borders, and other non-text graphical elements that convey meaning.