♿ 명도 대비 검사기(WCAG)
WCAG 2.1 상대 휘도 공식 그대로 계산해 AA·AAA 기준 통과 여부를 판정합니다.
사용 방법
- 전경색(글자색)을 선택합니다.
- 배경색을 선택합니다.
- 대비 비율과 AA·AAA × 일반·큰 글씨 4가지 기준의 통과 여부를 확인합니다.
이럴 때 유용해요
- 웹 접근성 인증(WA) 심사를 준비하며 색 조합을 사전 점검할 때
- 공공기관·기업 웹사이트의 텍스트 색상 가이드를 만들 때
- 디자인 시스템의 버튼·라벨 색이 기준을 통과하는지 검증할 때
알아두면 좋은 팁
- 큰 글씨 기준은 18pt(약 24px) 이상, 또는 굵은 14pt(약 18.7px) 이상입니다. 이 경우 AA는 3:1로 완화됩니다.
- 로고·장식 요소·비활성 상태 컨트롤은 WCAG 대비 기준의 예외입니다.
- 그라데이션이나 이미지 위 텍스트는 가장 대비가 낮은 지점을 기준으로 검사해야 합니다.
자주 묻는 질문
AA와 AAA는 무엇이 다른가요?
WCAG의 적합성 수준입니다. AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1 이상으로 대부분의 법적·공공 기준이 요구하는 수준이고, AAA는 7:1(큰 텍스트 4.5:1)로 저시력 사용자까지 고려한 최고 수준입니다.
대비 비율 계산 공식이 정확한가요?
네. WCAG 2.1이 정의한 상대 휘도 공식(sRGB 감마 보정 후 0.2126R+0.7152G+0.0722B)을 그대로 구현했으며, (L1+0.05)/(L2+0.05)로 비율을 구합니다. WebAIM 등 공인 도구와 동일한 값이 나옵니다.
4.49:1로 아슬아슬하게 미달이면 어떻게 하나요?
기준은 4.5:1 이상이므로 4.49는 불합격입니다. 글자색 밝기를 1~2% 낮추거나 배경을 살짝 밝히면 통과합니다. 심사 도구 간 반올림 차이가 있을 수 있으니 여유 있게 4.6:1 이상을 확보하는 것이 안전합니다.
placeholder나 비활성 버튼도 기준을 지켜야 하나요?
비활성(disabled) 상태의 UI 컴포넌트는 WCAG 예외로 기준 적용 대상이 아닙니다. 다만 placeholder는 사용자가 읽어야 하는 안내문이라면 기준을 지키는 것이 바람직합니다.
색약 사용자를 위한 검사도 되나요?
명도 대비는 색각 이상과 무관하게 밝기 차이만 측정하므로 기본적인 안전장치가 됩니다. 색 구분 자체가 정보인 경우(예: 빨강=오류)는 색 외에 아이콘·텍스트를 병행해야 하며, '색맹 시뮬레이터' 도구로 미리 확인할 수 있습니다.
