Color Contrast Checker

Check WCAG contrast ratios between foreground and background colors.

Foreground

Background

Sample Text

The quick brown fox jumps over the lazy dog.

Small text preview (14px)

17.40

Contrast Ratio

AA Normal Text (4.5:1)PASS

AA Large Text (3:1)PASS

AAA Normal Text (7:1)PASS

AAA Large Text (4.5:1)PASS

Built with this prompt

Build a color contrast checker in React with:
- Foreground and background color pickers (with hex text inputs)
- A swap-colors button
- A live sample-text preview rendered in the chosen colors
- WCAG contrast ratio calculation (relative luminance formula)
- Pass/fail badges for AA Normal (4.5:1), AA Large (3:1), AAA Normal (7:1), AAA Large (4.5:1)
- Dark theme, no dependencies

Try in Project Starter →