Color Contrast Checker

Ensure your design’s legibility with our contrast checker. Test text and background colors to meet WCAG accessibility standards (AA & AAA).

🎨 Contrast Analyzer

📝 Text Color Foreground

🖼️ Background Color Background

The quick brown fox jumps over the lazy dog

Almost before we knew it, we had left the ground. This text demonstrates readability contrast.

Sample text — WCAG contrast test

📖 Understanding WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) define two levels of contrast compliance: AA (minimum) and AAA (enhanced). For normal text (under 18pt / 24px), the required contrast ratio is at least 4.5:1 for AA, and 7:1 for AAA. Large text (≥18pt or 24px bold) requires 3:1 (AA) and 4.5:1 (AAA). Our tool calculates the relative luminance and gives instant pass/fail indicators.

💡 Contrast Ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is lighter luminance, L2 darker.

Copied to clipboard