Design & UI Validation

Contrast Checker

Mathematically verify WCAG AA and AAA color contrast ratios between any two colors, with auto-fix lightness sliders to find the nearest compliant shade.

Overview

WCAG Contrast Ratio Verification

Poor color contrast is one of the most common accessibility failures. The WCAG standard requires a minimum contrast ratio of 4.5:1 for normal text (AA), 3:1 for large text (AA), and 7:1 for normal text (AAA). The Contrast Checker calculates the exact ratio between any foreground and background color combination and provides a clear pass/fail verdict.

  • Real-Time Ratio Calculation: The contrast ratio updates live as you adjust either color — no "calculate" button required.
  • Dual AA/AAA Compliance Badges: Separate pass/fail indicators for normal text (AA: 4.5:1, AAA: 7:1) and large text (AA: 3:1, AAA: 4.5:1).
  • Lightness Sliders: Fine-tune the lightness of either color using a slider to find the closest compliant shade without changing the hue or saturation.
  • Auto-Fix Suggestions: Automatically calculate the nearest lighter or darker shade of the foreground color that achieves AA compliance — one click to apply.
  • Visual Preview: Shows a live text preview against the background color so you can see the actual visual result, not just the number.
WCAG Thresholds Reference

Contrast Ratio Requirements

📝

Normal Text — AA

Minimum 4.5:1 ratio. This applies to text under 18pt (24px) or bold text under 14pt (approximately 18.5px bold).

🔠

Large Text — AA

Minimum 3:1 ratio. This applies to text 18pt (24px) or larger, or bold text 14pt (18.5px) or larger.

⭐

Normal Text — AAA

Minimum 7:1 ratio. Enhanced level for users with low vision. Aim for this in critical information areas.

🏆

Large Text — AAA

Minimum 4.5:1 ratio. The same as AA normal text — a higher bar for large display text.

Pro Tips
💡
Pair with the Colorpicker for live sampling Use the Colorpicker's EyeDropper to sample the exact foreground and background colors from your live app, then paste them directly into the Contrast Checker for an instant WCAG verdict on your actual deployed colors.
💡
Use the lightness slider to preserve brand colors If a brand color fails WCAG AA, use the lightness slider to darken it just enough to pass without changing the hue. This keeps your brand identity intact while meeting compliance requirements.