두 색상의 명도 대비 비율을 계산합니다. 웹 접근성 기준 WCAG AA / AAA 통과 여부도 함께 표시됩니다.
큰 글씨 (Large Text) 18pt+
일반 글씨 (Normal Text) 16px
대비 비율: — : 1
- — WCAG AA 일반 텍스트 (4.5:1)
- — WCAG AA 큰 텍스트 (3:1)
- — WCAG AAA 일반 텍스트 (7:1)
- — WCAG AAA 큰 텍스트 (4.5:1)
색상 대비 검사기 사용법
- 전경 색상(텍스트 색)을 컬러 피커 또는 HEX 입력으로 지정합니다.
- 배경 색상도 동일한 방식으로 지정합니다.
- 대비 비율(1:1 ~ 21:1)이 즉시 계산되고 미리보기로 가독성을 확인합니다.
- WCAG AA / AAA 통과 여부를 항목별로 확인합니다.
주요 기능
- WCAG 2.1 공식 명도 대비 계산 알고리즘 사용
- AA 일반 / AA 큰 글씨 / AAA 일반 / AAA 큰 글씨 4가지 기준 동시 표시
- 미리보기로 실제 가독성 확인
- HEX 입력과 컬러 피커 양방향 동기화
- 완전 무료, 외부 통신 없음
활용 예시
- 본문 텍스트 — 배경과 글자 색의 가독성 검증
- 버튼·CTA — 라벨이 충분히 잘 보이는지 확인
- 폼 라벨·플레이스홀더 — 흐릿한 회색이 기준을 통과하는지
- 차트·그래프 — 데이터 라벨과 배경의 대비 검증
- 접근성 인증 신청 — WCAG 준수 보고서 작성용
색상 대비란?
전경 텍스트와 배경의 명도 차이를 1:1 ~ 21:1 사이의 비율로 표현한 값입니다. 비율이 높을수록 대비가 강해 가독성이 좋아지며, 시각 약자도 콘텐츠를 잘 읽을 수 있습니다. WCAG(Web Content Accessibility Guidelines)는 이 비율의 최소 기준을 명시하고 있습니다.
WCAG 접근성 기준
- AA 일반 텍스트 — 4.5:1 이상 (대부분의 본문에 권장)
- AA 큰 텍스트 — 3:1 이상 (18pt 또는 14pt 굵게 이상)
- AAA 일반 텍스트 — 7:1 이상 (가장 엄격, 정부·공공기관 권장)
- AAA 큰 텍스트 — 4.5:1 이상
자주 묻는 질문
AA와 AAA 중 어느 기준을 따라야 하나요?
일반 상업 웹/앱은 AA 기준(4.5:1)을 만족하면 충분합니다. 정부·공공기관 사이트, 의료·금융 등 모든 사용자가 동등하게 접근해야 하는 서비스는 AAA 기준(7:1)을 권장합니다. 한국 웹 접근성 인증마크(WA)도 기본적으로 AA 기준을 따릅니다.
큰 텍스트의 정확한 정의는?
WCAG 기준으로 18pt 이상(약 24px 이상) 또는 14pt 굵은 글씨 이상(약 19px 굵게)을 큰 텍스트로 정의합니다. 큰 글자는 형태가 명확해 약간 낮은 대비로도 읽히기 때문에 기준이 완화됩니다.
그라데이션 배경에서는 어떻게 측정하나요?
그라데이션의 가장 밝은 부분과 가장 어두운 부분을 각각 텍스트 색과 대비 측정해 두 결과 모두 기준을 통과해야 합니다. 텍스트 위치에서 실제 보이는 배경색을 추출해 검사하시는 것을 권장합니다.
컬러블라인드(색맹) 사용자에게도 도움이 되나요?
네. 명도 대비는 색조와 무관하게 작동하므로, 적녹색맹 사용자도 충분한 명도 대비가 있는 텍스트는 읽을 수 있습니다. 단, 색만으로 정보를 전달하지 말고(예: 빨강·초록 화살표만으로 상승·하락 표시) 아이콘·텍스트를 함께 사용하는 것이 더 좋습니다.