Contrast Checker
Choose text and background colors, preview them together, and check their contrast ratio.
This tool estimates contrast using a standard luminance-based ratio and compares it to common accessibility guidance levels.
| Metric | Value |
|---|
Privacy: contrast calculation runs locally in your browser. No values are stored or transmitted.
How it works
Pick a foreground and background color, preview them together, and review the contrast ratio plus accessibility-style pass indicators.
Examples
- Check whether body text is readable on a light background
- Compare dark and light UI combinations quickly
- Test brand colors against accessibility thresholds
FAQ
- What does this contrast checker do?
It calculates the contrast ratio between a text color and a background color and compares the result with common WCAG thresholds.
- Does it show AA and AAA guidance?
Yes. The tool indicates whether the current contrast passes common normal-text and large-text thresholds.
- Can I preview the combination live?
Yes. The tool includes a live preview using your selected foreground and background colors.
- Is any color data stored?
No. Everything runs locally in your browser and no values are stored or transmitted.