Color Contrast Checker - Check WCAG Contrast Ratio
Compare background and foreground colors and compute the contrast ratio. Useful for accessibility checks and readable UI design.
Benefits
- Catch low-contrast UI combinations early
- Improve readability for all users
- Helpful for WCAG-driven accessibility reviews
Use cases
- Buttons and links on colored backgrounds
- Hero text over images/gradients (approximation)
- Design system palette checks
Field guide
- Background: the backdrop color
- Foreground: the text/icon color
- Check: computes the contrast ratio
- Ratio: higher is more contrast