개발자·4 분 분량·2026년 10월 16일

How to Check Color Contrast for WCAG AA and AAA

Check whether your text and background colors meet WCAG contrast requirements, and learn what the ratios mean.

Why contrast matters

Low contrast text is hard to read for many people, especially in bright light or with low vision. WCAG sets minimum contrast ratios so text stays readable.

The ratios

For level AA, normal text needs at least 4.5:1 and large text needs at least 3:1. For level AAA, normal text needs 7:1 and large text needs 4.5:1. Large text means roughly 24px regular or 18.66px bold and above.

How to check your colors

Open the Contrast Checker, pick a text color and a background color or type hex codes such as #1F2937 or #FFF, and read the ratio. The live preview shows how the text looks, and pass or fail badges cover AA and AAA for normal and large text. Swap flips the two colors.

What it does not cover

It compares two solid colors using the WCAG 2.x method. It does not test non-text elements such as icons and form borders, the newer APCA method, transparency, or text over gradients and images, so check those separately.

도구 열기: 명암 대비 검사기