색 대비 검사기
마지막 업데이트: 2026-06-25
색 대비 검사기는 전경색(글자)과 배경색의 명도 대비비를 계산해 WCAG 2.1 AA(본문 4.5:1)·AAA(7:1) 통과 여부를 알려줍니다.
대비비 = (밝은 색 휘도 + 0.05) ÷ (어두운 색 휘도 + 0.05), 값은 1:1부터 21:1까지입니다.
전경색·배경색 입력
대비비 (Contrast Ratio)
0:1
큰 글자 미리보기 (Aa 가나다 123)
본문 글자 미리보기입니다. 이 정도 크기의 글자가 배경 위에서 잘 읽히는지 확인하세요.
| 기준 | 필요 대비 | 결과 |
|---|---|---|
| 본문 텍스트 AA | 4.5:1 | |
| 본문 텍스트 AAA | 7:1 | |
| 큰 글자 AA | 3:1 | |
| 큰 글자 AAA | 4.5:1 | |
| UI 요소·도형 (비텍스트) | 3:1 |
큰 글자 기준은 18pt(약 24px) 이상 또는 14pt(약 18.66px) 굵은 글씨에 적용됩니다.
사용 방법
- 전경색 입력 — 글자 색(전경색)을 색상 선택기 또는 HEX로 입력합니다.
- 배경색 입력 — 글자가 놓일 배경색을 색상 선택기 또는 HEX로 입력합니다.
- 결과 확인 — 대비비(예: 4.5:1)와 본문·큰 글자별 WCAG AA·AAA 통과 여부를 확인합니다.
WCAG 색 대비 기준과 계산 방법
웹 접근성 지침 WCAG 2.1은 글자와 배경의 명도 대비비(contrast ratio)로 가독성을 평가합니다. 대비비는 두 색의 상대 휘도(relative luminance)를 구한 뒤 (밝은 색 + 0.05) ÷ (어두운 색 + 0.05) 공식으로 계산하며, 검정과 흰색이 최대 21:1입니다.
| 대상 | AA (최소) | AAA (강화) |
|---|---|---|
| 일반 본문 텍스트 | 4.5:1 | 7:1 |
| 큰 글자 (18pt+/14pt 굵게) | 3:1 | 4.5:1 |
| UI 컴포넌트·그래픽 객체 | 3:1 | — |
대부분의 서비스는 AA(본문 4.5:1)를 최소 목표로 삼습니다. 공공기관이나 고령자·저시력 사용자가 많은 서비스라면 AAA(7:1)를 권장합니다. 대비를 통과하더라도 색만으로 정보를 구분하지 않도록 아이콘·텍스트를 함께 쓰고, 색맹 시뮬레이터로 색각이상에서의 구분도 확인하세요. 더 자세한 내용은 웹 색상 대비와 접근성 가이드에 정리되어 있습니다.
자주 묻는 질문 (FAQ)
WCAG 색 대비 기준은 얼마인가요?
WCAG 2.1 기준 일반 본문 텍스트는 AA 4.5:1, AAA 7:1 이상이어야 합니다. 18pt(약 24px) 이상 또는 14pt 굵은 글씨 같은 큰 글자는 AA 3:1, AAA 4.5:1로 기준이 완화됩니다.
대비비는 어떻게 계산되나요?
각 색의 상대 휘도(relative luminance)를 구한 뒤, (밝은 색 휘도 + 0.05) ÷ (어두운 색 휘도 + 0.05)로 계산합니다. 결과는 1:1(동일색)부터 21:1(검정과 흰색)까지의 값입니다.
AA와 AAA 중 어느 기준을 따라야 하나요?
법적·실무적 최소 기준은 보통 AA(본문 4.5:1)입니다. 공공기관, 의료, 고령자 대상 서비스 등 접근성이 특히 중요한 경우 AAA(7:1)를 목표로 하면 더 많은 사용자가 편하게 읽을 수 있습니다.
색 대비만 맞추면 접근성이 충분한가요?
대비는 가독성의 핵심이지만 전부는 아닙니다. 색만으로 정보를 구분하지 않기(아이콘·텍스트 병행), 색맹 사용자 고려 등도 함께 필요합니다. 색맹 시뮬레이터로 색각이상에서의 구분도 점검해 보세요.
관련 도구·가이드
마지막 업데이트: 2026-06-25