색상 대비 검사기
무료 색상 대비 검사기: 텍스트와 배경 색상이 WCAG 2.2 AA·AAA를 충족하는지 검사하고, 대비율과 통과하는 가장 가까운 색을 확인하세요.
이것은 문단 크기의 일반 텍스트입니다.
큰 텍스트
버튼| AA | AAA | |
|---|---|---|
| 일반 텍스트 | ||
| 큰 텍스트(24 px 또는 굵게 18.7 px) | ||
| 아이콘 및 인터페이스 테두리 | — |
무엇을 하나
이 검사기는 여러 접근성 법률에서 사용하는 WCAG 2.2 접근성 지침의 공식으로 텍스트 색상과 배경 사이의 대비를 측정합니다. 1:1(대비 없음)부터 21:1(흰색 위의 검은색)까지의 대비율을 표시하고, 일반 텍스트, 큰 텍스트, 아이콘과 테두리 같은 인터페이스 요소에 대해 AA 및 AAA 기준을 통과하는지 보여 줍니다. 조합이 실패하면 같은 색상 계열에서 통과하는 가장 가까운 색을 제안합니다.
사용 방법
- 텍스트 색상과 배경 색상을 입력하거나 선택합니다.
- 대비율과 AA·AAA 결과를 읽고 실시간 미리보기를 확인합니다.
- 실패하면 제안된 색상의 적용을 누른 뒤 링크를 복사해 결과를 공유합니다.
자주 묻는 질문
어느 정도의 대비율이 필요한가요?
일반적인 법적 목표인 AA 수준은 일반 텍스트에 4.5:1, 큰 텍스트와 아이콘 및 인터페이스 테두리에 3:1이 필요합니다. AAA 수준은 일반 텍스트에 7:1, 큰 텍스트에 4.5:1이 필요합니다.
큰 텍스트의 기준은 무엇인가요?
최소 24 CSS 픽셀(18포인트) 크기의 텍스트, 또는 굵은 글꼴일 때 약 18.7 CSS 픽셀(14포인트) 이상인 텍스트입니다. 제목은 대개 큰 텍스트이고, 본문은 보통 그렇지 않습니다.
흰색 위의 #777777은 왜 실패하나요?
대비율이 4.47:1로, 일반 텍스트에 필요한 4.5:1에 약간 못 미칩니다. 비율은 반올림되지 않으므로, 조금 더 어두운 #767676(4.54:1)이 흰색 위에서 통과하는 가장 밝은 회색입니다.
W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast