Tools / Image

Color Contrast Checker

Enter a text and background color to calculate their contrast ratio and instantly check WCAG accessibility compliance (AA/AAA).

This page participates in the Coupang Partners program and may earn a commission from qualifying purchases.

Color contrast check

Text color

Background color

Preview

Example text on this background

Contrast ratio17.40 : 1

Normal text · AAPass

Normal text · AAAPass

Large text (18pt+) · AAPass

Large text (18pt+) · AAAPass

This page participates in the Coupang Partners program and may earn a commission from qualifying purchases.

첫 번째 댓글을 남겨보세요!

This page participates in the Coupang Partners program and may earn a commission from qualifying purchases.

Tool info

Category Image

Processing Directly in your browser

Data storage Not stored

Updated 2026-08-20

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.

FAQ

자주 묻는 질문

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.

Favorites

This page participates in the Coupang Partners program and may earn a commission from qualifying purchases.