디자인

명암비 검사기

전경색과 배경색의 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 기준 미달 시 하단에 추천 색상이 표시됩니다. 클릭하면 바로 적용됩니다.

이 도구로 한 번에 끝내는 작업

명암비 검사기를 다른 도구와 연결해 한 흐름으로 처리해 보세요.

이미지에서 브랜드 색상 추출 + 접근성 검증

사진·로고에서 색상 뽑아 → HEX/Tailwind 확인 → WCAG 명암비 검사.

3단계 작업

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)나 그라디언트도 검사할 수 있나요?