Tech Tools

Color Contrast Checker

WCAG AA & AAA

Color Contrast Checker
Text Color / Background Color
Text Color
Background Color
Contrast Ratio
Contrast Ratio
AA — Normal Text
≥ 4.5:1
AA — Large Text
≥ 3:1
AAA — Normal Text
≥ 7:1
AAA — Large Text
≥ 4.5:1
Preview

Normal text (16px) — The quick brown fox jumps over the lazy dog.

Large text (24px) — Accessibility matters.

Large bold text (18.66px Bold)

Button
Badge
مساحة إعلانية
About this Tool

What is the Color Contrast Checker?

The Color Contrast Checker is a free accessibility tool that verifies whether your text and background color combination meets WCAG (Web Content Accessibility Guidelines) standards.

WCAG defines two compliance levels: AA (minimum acceptable) and AAA (enhanced), each with different requirements for normal and large text sizes.

WCAG Contrast Standards

Level AA requires a 4.5:1 ratio for normal text and 3:1 for large text (18pt+). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Large text means 18pt or 14pt bold and above.

Why Does Contrast Matter?

About 8% of men have some form of color blindness. Proper contrast ensures readability for everyone — in bright sunlight, on low-quality screens, and for elderly users. It also improves overall UX and can positively affect SEO.

مساحة إعلانية