Stop Failing WCAG! The FREE Color Contrast Checker That Guarantees Accessibility | WCAG color contrast checker

👁️ WCAG Color Contrast Accessibility Checker

Foreground (Text) Color

Background Color

Example Text

Contrast Ratio

N/A

WCAG AA Status

Normal Text Large Text

WCAG AAA Status

Normal Text Large Text

Tool created by **Bishhnu Banerji**

How to Use Your Color Contrast Checker

1. Select Colors: Use the color pickers or enter HEX codes (e.g., `#FF0000` for red) for the text (Foreground) and background colors.
2. Live Preview: The "Example Text" area immediately updates to show your chosen colors, giving you a visual reference.
3. View Results: The Contrast Ratio is calculated instantly. Below, you'll see a clear PASS/FAIL status against WCAG AA and AAA standards for both normal and large text.
4. Understand Standards:
   • AA Normal Text: Ratio ≥ 4.5:1
   • AA Large Text (18pt / 24px+ or 14pt / 18.66px+ bold): Ratio ≥ 3:1
   • AAA Normal Text: Ratio ≥ 7:1
   • AAA Large Text: Ratio ≥ 4.5:1
5. Theme: Use the "Toggle Dark Mode" button to adjust the tool's interface to your preference.