Color Contrast Checker
Check WCAG contrast ratios for foreground and background colors locally in the browser, including AA/AAA for normal and large text.
Color Contrast Checker
The Color Contrast Checker validates WCAG contrast ratios between foreground and background colors locally in the browser, shows the ratio from 1:1 to 21:1, and reports AA / AAA results for normal and large text.
How do you use it?
- Enter foreground and background colors in HEX, RGB, HSL, or common CSS keyword formats.
- Review the live contrast ratio and AA / AAA status.
- Use the preview area to inspect real text readability.
- Copy the report for design handoff, frontend review, or accessibility notes.
Features
- Calculates WCAG contrast locally
- Checks AA / AAA for normal and large text
- Blends transparent colors over white before calculation
Why use this tool?
- Validate body text, buttons, links, and icon colors quickly
- Reduce accessibility drift between design and implementation
- Check colors in the browser without uploading data