๐ฏWCAG Color Contrast Check
Calculate contrast ratio between text and background and check WCAG AA/AAA compliance. Useful for design accessibility audits, government and public sector sites (accessibility required), accommodating visually impaired users, and mobile readability checks.
How to use
- 1Pick text color and background color.
- 2Contrast ratio and pass status display instantly.
FAQ
What's the standard?+
WCAG 2.1: regular text needs AA 4.5:1 or AAA 7:1. Large text (18pt+) needs AA 3:1 or AAA 4.5:1.
AA vs AAA?+
AA is the standard recommendation; AAA is stricter. Government and public agencies usually mandate AA.
Why does this matter for design?+
It ensures readability for users with visual impairment, color blindness, presbyopia, and in low-light environments like bright sunlight. Comfortable for everyone.
Why is gray-on-white bad?+
Looks clean in design but low contrast makes it hard for users with limited vision. Body text needs contrast above #767676.
Is this legally required in Korea?+
Public agencies and government sites must follow the Korean Anti-Discrimination Act and KS X 6385 accessibility standards. Recommended for private sites too.
Do I need to check for color blindness separately?+
This tool checks luminance contrast only. For color blindness simulation, use a separate tool or designer tool like a Figma plugin.