Color Contrast Checker
Instantly check text readability and AA/AAA compliance with WCAG contrast ratios
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
This tool calculates the WCAG contrast ratio between your foreground and background colors and tells you whether normal and large text pass the AA and AAA accessibility levels. It also shows a live text preview, so designers and developers can check readability and web accessibility at a glance.
How to use
- Enter your foreground (text) and background colors with the color picker or a HEX value (#RRGGBB).
- Check the calculated contrast ratio and the AA/AAA pass badges.
- Verify readability with your own eyes using the live text preview.
- If it doesn't pass, nudge the colors until you reach at least 4.5:1.
FAQ
- What are AA and AAA?
- They're WCAG web accessibility levels. Normal text needs a contrast ratio of at least 4.5:1 (AA) or 7:1 (AAA), while large text needs at least 3:1 (AA) or 4.5:1 (AAA). We recommend at least AA for body text.
- What counts as 'large text'?
- Text is considered large when it's 18pt (about 24px) or bigger, or 14pt (about 18.7px) or bigger in bold. Large text can pass at a lower contrast ratio.
- Are the colors I enter sent to a server?
- No. The contrast calculation runs entirely in your browser, and your color values are never sent to or stored on a server.