Color Contrast Checker
Enter a text and background color to calculate their contrast ratio and instantly check WCAG accessibility compliance (AA/AAA).
Color contrast check
Preview
This page participates in the Coupang Partners program and may earn a commission from qualifying purchases.
How to use
Enter the text color and background color using the color picker or a HEX code.
Check the live preview to see the contrast, along with the calculated contrast ratio.
See whether each WCAG AA/AAA threshold passes for normal text and large text.
자주 묻는 질문
Q1. Are the colors I enter sent to a server?
No. All calculations happen entirely in your browser and nothing is sent to or stored on a server.
Q2. How is the contrast ratio calculated?
It uses the WCAG 2.1 relative luminance formula defined by the W3C to compare the brightness of the two colors. The result ranges from 1:1 (no contrast) up to 21:1 (black on white).
Q3. What's the difference between AA and AAA?
AA is the minimum recommended accessibility level, while AAA is stricter. Normal text needs at least 4.5:1 for AA and 7:1 for AAA; large text (18pt+) needs at least 3:1 for AA and 4.5:1 for AAA.
Q4. Why does contrast matter?
Sufficient contrast helps users with low vision or color blindness read text. Low contrast can also make text hard to read for anyone in bright light or on a glare-prone screen.
Q5. Does the same threshold apply to non-text elements like buttons and icons?
No. WCAG defines a separate 3:1 threshold for UI components and graphical objects. This tool specifically calculates contrast between text and its background.
댓글
첫 번째 댓글을 남겨보세요!
This page participates in the Coupang Partners program and may earn a commission from qualifying purchases.