What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) requires a minimum contrast ratio of 4.5:1 for normal text (AA) and 7:1 for enhanced (AAA). Large text (18pt+) only needs 3:1 (AA) and 4.5:1 (AAA).

🎨 Contrast Ratio Calculator

Check if your color combinations meet WCAG accessibility standards.

Background Color

Text Color

Contrast Ratio

21:1

Sample Text Preview

AA Normal
Pass (≥4.5:1)

AAA Normal
Pass (≥7:1)

AA Large
Pass (≥3:1)

AAA Large
Pass (≥4.5:1)

💡 Expert Tip

Don't rely on color alone. 8% of men are colorblind. If your error message is "red text" with no icon or label, colorblind users won't see the warning. Always pair color with text, icons, or underlines.

Jennifer Liu

Accessibility Consultant, CPACC Certified

📌 Embed This Tool

<iframe src="https://calcs.top/other/contrast-ratio-calculator/" width="100%" height="800" frameborder="0"></iframe>