Color Contrast Checker with Fix Suggestions
Check text and background colors against WCAG contrast ratios and get passing color suggestions
Pick two colors and this tool calculates the contrast ratio in real time and shows whether it passes WCAG 2.1 AA and AAA. It's built for web designers and developers checking text legibility — and when a pair falls short, it automatically suggests an alternative color with adjusted lightness that you can apply with one click. Everything is calculated instantly in your browser, so the color values you enter are never sent to a server.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Enter the text color (foreground) using the color picker or a hex code.
- Enter the background color the same way.
- Review the preview, the contrast ratio, and the AA/AAA pass status.
- If it falls short, hit Apply on a suggested color to swap it in immediately.
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. AAA is the stricter standard, requiring at least 7:1 for normal text and 4.5:1 for large text.
- How are the suggested colors calculated?
- The tool keeps the original hue and saturation intact and adjusts only the lightness across the 0–100% range, finding the color closest to your original that still meets the target contrast ratio.
- Are the color values I enter stored on a server?
- No. Everything is calculated inside your browser and no color values leave your device.