색상 대비 검사기

WCAG AA 및 AAA에 대해 전경/배경 대비를 확인합니다. 색상을 선택할 때 비율 업데이트를 확인하세요.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

WCAG AA 및 AAA 지침을 기준으로 전경/배경 대비를 확인하세요.
브라우저에서 실행됩니다.
무료로 사용 가능

사용 방법

텍스트(전경) 및 배경색을 선택합니다.
명암비와 AA/AAA 결과를 읽어보세요.
목표 수준을 통과할 때까지 조정하세요.

How this tool works

텍스트(전경) 및 배경색을 선택합니다.
명암비와 AA/AAA 결과를 읽어보세요.
목표 수준을 통과할 때까지 조정하세요.

Recommended settings

먼저 기본 옵션을 사용한 다음 필요한 경우 조정하세요.

Supported formats

Text / on-page input

File size and limits

매우 복잡한 다중 레이어 미리보기는 구형 휴대폰에서 느리게 느껴질 수 있습니다.

Privacy

색상 및 CSS 생성기는 브라우저에서 완전히 실행됩니다. 미리보기 및 변환에서는 스타일을 업로드하지 않습니다.

Common use cases

필요할 때마다 색상 대비 검사기를 사용하세요. WCAG AA 및 AAA 지침에 따라 전경/배경 대비를 확인하세요.

Troubleshooting

붙여넣은 후 미리보기가 다르게 보입니다.

페이지에 경쟁 CSS가 있는지 확인하세요(재설정, 상속된 색상). 먼저 생성된 규칙을 격리된 스타일시트에 복사합니다.

FAQ

내 CSS가 업로드되나요?

아니요. 생성기와 변환기는 실시간 미리보기를 통해 브라우저에서 실행됩니다.

계정이 필요합니까?

아니요. 도구를 열고 컨트롤을 조정한 후 CSS를 복사하세요.