Color Contrast Checker & Suggestion Tool
Check WCAG contrast ratio and get passing color suggestions instantly
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
This tool calculates the contrast ratio between a text color and a background color in real time, showing whether it meets WCAG 2.1 AA and AAA accessibility standards. It's built for web designers and developers who need to verify text readability, and when a combination fails, it automatically suggests an adjusted lightness value that passes. Everything runs directly in your browser, so no color data is ever sent to a server.
How to use
- Enter your text (foreground) color using the color picker or hex code.
- Enter your background color the same way.
- Review the live preview, contrast ratio, and AA/AAA pass/fail badges.
- If a check fails, click 'Apply' next to a suggested color to update it instantly.
FAQ
- What's the difference between AA and AAA?
- AA requires at least 4.5:1 for normal text and 3:1 for large text, while AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text.
- How are the suggested colors generated?
- The tool keeps the original hue and saturation and scans lightness values from 0% to 100%, picking the closest one to your original color that still meets the target contrast ratio.
- Is my color data stored anywhere?
- No, all calculations happen locally in your browser and no color values are transmitted or saved externally.