디자인
명암비 검사기
전경색과 배경색의 WCAG 2.1 명암비를 검사하고, AA·AAA 등급 통과 여부를 확인합니다.
전경색 (텍스트)
RGB(108, 114, 255)
배경색
RGB(15, 17, 23)
명암비4.93:1AA
큰 텍스트 미리보기
일반 크기의 본문 텍스트입니다. 이 문장이 배경 위에서 충분히 읽기 쉬운지 확인하세요.
반전 미리보기
전경색과 배경색을 뒤집었을 때의 가독성을 확인합니다.
WCAG 2.1 기준별 판정
AA 일반 텍스트본문 크기 (14px~18px) — 최소 4.5:1
통과AA 큰 텍스트18px bold 또는 24px 이상 — 최소 3:1
통과AA UI 요소아이콘·입력창·테두리 등 — 최소 3:1
통과AAA 일반 텍스트최고 수준의 가독성 — 최소 7:1
미달AAA 큰 텍스트18px bold 또는 24px 이상 — 최소 4.5:1
통과이 결과를 다른 도구로 이어가기
사용 방법
- 전경색(텍스트 색상)과 배경색을 HEX 코드로 입력하거나 컬러 피커로 선택합니다.
- 명암비가 자동 계산되고 WCAG 2.1 기준별 통과 여부가 표시됩니다.
- 미리보기에서 실제 텍스트 가독성을 눈으로 확인합니다.
- AA 기준 미달 시 하단에 추천 색상이 표시됩니다. 클릭하면 바로 적용됩니다.
이 도구로 한 번에 끝내는 작업
명암비 검사기를 다른 도구와 연결해 한 흐름으로 처리해 보세요.
WCAG 색상 대비 검사기 자세히 알아보기
WCAG 색상 대비 검사기는 전경색(글자색)과 배경색의 명도 대비비율을 계산해 W3C 웹 접근성 지침(WCAG 2.1)의 AA·AAA 기준을 충족하는지 즉시 판정하는 도구입니다. 본문 텍스트는 4.5:1, 큰 글자(18pt 이상 또는 14pt bold)는 3:1, AAA 등급은 7:1과 4.5:1이 기준이며 본 도구는 이 기준을 모두 동시에 표시합니다. 색상은 hex 코드 입력이나 컬러피커로 자유롭게 조절할 수 있고 라이브 미리보기에서 실제 가독성을 바로 확인할 수 있습니다.
더 알아보기접기
대비가 부족할 때는 색조를 유지한 채 명도(HSL의 L)를 자동 조절해 AA를 통과하는 가장 가까운 색상을 추천합니다. 디자인 시스템 토큰 검토, 다크모드 색상 결정, 광고 배너 가독성 점검 등 접근성과 가독성을 한 번에 체크해야 하는 작업에서 큰 시간을 절약할 수 있습니다.
이럴 때 사용하세요
- •디자인 시스템의 텍스트·배경 색상 조합이 WCAG AA를 통과하는지 검증할 때
- •다크모드 화면의 색상 가독성이 충분한지 확인할 때
- •랜딩페이지 CTA 버튼의 글자색·배경색 대비를 점검할 때
- •공공기관·교육 사이트의 접근성 기준 충족 여부를 점검할 때
- •브랜드 색상에 가까운 합격 색상을 빠르게 찾고 싶을 때
WCAG 색상 대비 검사기 자주 묻는 질문
WCAG AA와 AAA 기준은 어떻게 다른가요?
AA는 본문 4.5:1, 큰 글자 3:1로 일반 사이트의 권장 기준이고, AAA는 본문 7:1, 큰 글자 4.5:1로 더 엄격합니다. 정부·공공 사이트는 AAA를 권장하기도 합니다.
큰 글자 기준(Large Text)은 무엇인가요?
18pt(약 24px) 이상의 일반 글자, 또는 14pt(약 18.66px) 이상의 굵은(bold) 글자가 큰 글자로 분류되어 더 낮은 대비비율을 적용받습니다.
대비비율은 어떻게 계산되나요?
두 색의 상대 휘도(relative luminance)를 구한 뒤 (밝은 색 + 0.05) / (어두운 색 + 0.05) 식으로 계산합니다. 본 도구는 이 식을 그대로 따릅니다.
추천 색상은 어떻게 만들어지나요?
원본 색상의 색조(H)와 채도(S)는 유지한 채 명도(L)만 점진적으로 조절해 AA 기준을 처음 통과하는 색을 찾아 제시합니다. 브랜드 톤을 최대한 유지할 수 있습니다.
투명도(alpha)나 그라디언트도 검사할 수 있나요?
본 도구는 단색(불투명) 두 가지의 대비를 검사합니다. 반투명 색상은 실제 합성 결과 색을 hex로 환산해 입력하시면 됩니다.