색상 명암비 검사기 사용 방법
디자인에서 맞닿을 단색 글자색과 배경색을 알고 있을 때 사용하세요. 텍스트 명암비만 확인하며 페이지 전체를 검사하지 않아요.
- 글자색을 3자리 또는 6자리 HEX 값으로 입력하세요.
- 텍스트 뒤의 단색 배경색을 입력하세요.
- 명암비 확인을 눌러 두 색상을 확정하세요.
- 비율과 각 항목의 통과 또는 미달 결과를 확인하세요.
- 확정된 예시를 살펴본 뒤 실제 화면에 쓰이는 다른 색상 조합도 각각 검사하세요.
WCAG 명암비 계산 방법
각 8비트 sRGB 채널을 255로 나눠요. 값이 0.04045 이하면 12.92로 나누고, 그보다 크면 ((channel + 0.055) / 1.055)²·⁴를 사용해요. 상대 휘도는 0.2126R + 0.7152G + 0.0722B예요. 최종 비율은 (L1 + 0.05) / (L2 + 0.05)로, L1은 밝은 색의 휘도이고 L2는 어두운 색의 휘도예요. 가능한 범위는 1:1~21:1이에요.
텍스트의 AA 및 AAA 기준
WCAG 2.2 AA 등급은 일반 텍스트에 4.5:1 이상, 큰 텍스트에 3:1 이상을 요구해요. AAA 등급은 일반 텍스트에 7:1 이상, 큰 텍스트에 4.5:1 이상이 필요해요. 큰 텍스트는 보통 굵기에서 18pt 이상 또는 굵은 글씨에서 14pt 이상을 뜻하며 한중일 문자에는 그에 상응하는 크기를 적용해요. CSS에서 18pt는 약 24px, 14pt는 약 18.5px예요. 매우 가늘거나 독특한 글꼴은 여전히 읽기 어려울 수 있어요.
표시 숫자와 판정이 달라 보이는 이유
기준은 소수 둘째 자리 표시값이 아닌 내부 비율 전체에 적용해요. 실제 비율이 4.499:1이면 반올림해 4.50:1로 표시되더라도 4.5:1 기준에 미달해요. 이 검사기는 모든 판정에 전체 계산 정밀도를 유지하고, 화면 표시와 클립보드 복사 비율만 따로 반올림해요.
이 검사기의 범위
- 불투명한 3자리 또는 6자리 sRGB HEX 색상만 입력할 수 있어요.
- 글자색 하나와 단색 배경 하나를 비교해요.
- 알파 합성, 그라데이션·이미지 색상 추출, 대체 색상 추천, 웹사이트 검사는 하지 않아요.
- 색상 조합 하나가 통과했다고 페이지나 제품 전체가 WCAG를 준수하는 것은 아니에요. 다른 글자 크기와 상태, 그래픽, 컨트롤, 초점 표시, 확대, 의미 구조와 상호작용도 검토해야 해요.
실무 확인 요령
글자와 배경이 맞닿는 곳에 실제로 지정된 색상을 사용하세요. 링크, 마우스 오버와 초점 상태, 비활성 컨트롤, 검증 메시지, 이미지 위 텍스트, 테마 변형을 각각 확인하세요. 안티앨리어싱으로 가는 글자가 더 밝게 보이면 미리보기만 믿지 마세요. 공식은 지정된 색상을 계산하지만 가독성은 글꼴과 렌더링 환경에도 영향을 받아요.
풀이 예시
흰색 #FFFFFF 위의 검정 #000000은 최대 명암비인 21.00:1이며 네 가지 텍스트 기준을 모두 통과해요.
흰색 위의 회색 #767676은 내부 비율이 약 4.5422:1로 일반 AA를 통과해요. #777777은 약 4.4781:1로 일반 AA에 미달해요. 두 값 모두 표시상으로는 4.5에 가까워요.
자주 묻는 질문
# 기호 없이 HEX를 입력해도 되나요?
네. 16진수 3자리 또는 6자리는 #이 있어도 없어도 입력할 수 있으며 결과에 맞게 정규화돼요.
투명도와 그라데이션은 왜 입력할 수 없나요?
실제 배경색이 합성 방식이나 위치에 따라 달라지기 때문이에요. 이 검사기는 불투명 글자색 하나와 불투명 배경색 하나만 다뤄요.
통과하면 웹사이트 전체가 WCAG를 충족하나요?
아니요. 선택한 텍스트 색상 조합이 표시된 수치 기준을 충족하는지만 확인해요.
16px 본문에는 어느 결과를 적용하나요?
일반적인 16px 본문은 일반 텍스트로 보고 AA에는 4.5:1 이상, AAA에는 7:1 이상을 적용하세요.
크고 굵은 텍스트는 3:1을 써도 되나요?
AA 등급에서 큰 텍스트 정의에 해당하면 가능해요. 굵은 글씨는 14pt 이상, 굵지 않은 글씨는 18pt 이상이어야 해요.