WCAG Color Contrast Checker — AA/AAA Ratio Tool
Enter a text and background HEX pair and instantly see the WCAG 2.1 contrast ratio plus AA/AAA pass or fail
Enter your text and background HEX colors and this tool calculates the exact contrast ratio using the WCAG 2.1 relative luminance formula, then tells you whether it passes AA or AAA.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Pick the text (foreground) and background HEX colors.
- Check the contrast ratio and whether it passes WCAG AA/AAA.
FAQ
- What contrast ratio does WCAG AA require?
- Normal text needs at least 4.5:1, and large text (18pt or bigger) needs at least 3.0:1 to pass AA.
- What's the difference between AAA and AA?
- AAA is the stricter tier — 7:1 for normal text and 4.5:1 for large text — and it's mainly recommended for government and financial sites.
- Do logos and decorative images need to meet this ratio too?
- No. WCAG contrast rules apply to body text and UI components; logos, purely decorative elements, and disabled text are exempt.