도구 소개
WCAG 명암비 검사기는 불투명한 두 색상의 명암비를 계산합니다. 실제 텍스트 미리보기와 일반 텍스트 및 큰 텍스트에 대한 AA / AAA 판정을 각각 제공합니다. 색상 명암비만 검사하므로 웹사이트 전체의 접근성 평가를 대신하지 않습니다.
사용 방법
- 전경색과 배경색에 불투명한 3자리 또는 6자리 HEX를 입력하세요.
- 배경 위에서 텍스트가 실제로 어떻게 보이는지 확인하세요.
- 명암비와 네 가지 통과·미달 결과를 확인하세요.
- 배색을 조절한 뒤 다시 확인하고 검사 결과를 복사하세요.
사용 예제
- #000000과 #ffffff → 21:1.
- 동일한 두 색상 → 1:1.
- #777777과 #ffffff → 약 4.48:1로, AA 일반 텍스트 기준인 4.5:1에 미달합니다.
계산 원리
sRGB 채널을 255로 나눕니다. c ≤ 0.04045이면 선형 채널은 c / 12.92, 그렇지 않으면 ((c + 0.055) / 1.055)^2.4입니다. 상대 휘도는 L = 0.2126R + 0.7152G + 0.0722B이며, 명암비 = (밝은 쪽 L + 0.05) / (어두운 쪽 L + 0.05)입니다. 통과 여부는 반올림하지 않은 전체 결과로 판단하며 표시에만 반올림을 적용합니다.
WCAG 2.x 텍스트 명암비 기준
- AA 일반 텍스트: 최소 4.5:1.
- AA 큰 텍스트: 최소 3:1.
- AAA 일반 텍스트: 최소 7:1.
- AAA 큰 텍스트: 최소 4.5:1.
큰 텍스트는 일반적으로 18pt(24 CSS px) 이상, 또는 굵은 글꼴로 14pt(약 18.67 CSS px) 이상을 뜻합니다. 경계값 판정에는 항상 반올림하지 않은 명암비를 사용합니다.
주요 용도
- 버튼의 글자와 배경 배색을 확인합니다.
- 테마의 일반 텍스트와 제목 명암비를 검사합니다.
- WCAG 텍스트 명암비 기준에 맞게 디자인을 조정합니다.
개인정보 안내
모든 입력 처리, 계산, CSS 생성, 미리보기는 현재 브라우저에서 이루어집니다. 사용자 내용을 업로드하지 않으며 백엔드, 데이터베이스, 온라인 API, 외부 CDN을 사용하지 않습니다. 입력값은 자동 저장되지 않습니다.
FAQ
WCAG 명암비란 무엇인가요?
전경과 배경의 상대 휘도로 색상 차이를 측정한 값으로, 범위는 1:1부터 21:1까지입니다.
4.5:1은 무엇을 뜻하나요?
WCAG AA 일반 텍스트의 최소 명암비입니다. 결과가 4.5 이상이어야 통과합니다.
AA와 AAA는 어떻게 다른가요?
텍스트 명암비에서 AAA는 AA보다 높은 기준을 요구합니다. 일반 텍스트는 7:1, 큰 텍스트는 4.5:1이어야 합니다.
큰 텍스트의 기준은 무엇인가요?
일반적으로 18pt 이상인 글자 또는 14pt 이상인 굵은 글자입니다. 각각 약 24px와 18.67px에 해당합니다.
투명 색상이나 그라데이션도 검사할 수 있나요?
이 페이지는 불투명한 단색만 처리합니다. 투명 색상은 실제 배경과 먼저 합성해야 하며, 그라데이션은 텍스트가 덮는 영역의 최소 명암비를 확인해야 합니다.