Color Contrast Checker
WCAG 접근성 색상 대비율 검사·AA/AAA 기준
| 레벨 | 일반 텍스트 (≤18px) | 큰 텍스트 (≥18px or ≥14px Bold) |
|---|---|---|
| AA | ✓ Pass≥ 4.5 : 1 | ✓ Pass≥ 3 : 1 |
| AAA | ✓ Pass≥ 7 : 1 | ✓ Pass≥ 4.5 : 1 |
색상 대비란?
색상 대비(Color Contrast)는 전경색(텍스트)과 배경색 사이의 밝기 차이를 수치화한 것입니다. WCAG(Web Content Accessibility Guidelines)는 시각 장애인과 저시력자를 포함한 모든 사용자가 웹 콘텐츠를 읽을 수 있도록 색상 대비 기준을 제시합니다. 대비율은 1:1(동일 색상)부터 21:1(흑/백)까지 범위를 가집니다. 법적·규정 준수 측면에서도 공공기관 웹사이트는 WCAG AA 기준 이상을 충족해야 합니다.
자주 묻는 질문
Q. WCAG란 무엇인가요?
A. WCAG(Web Content Accessibility Guidelines)는 W3C가 제정한 웹 콘텐츠 접근성 지침입니다. 시각 장애인을 포함한 모든 사용자가 웹을 이용할 수 있도록 색상 대비, 텍스트 크기, 키보드 접근 등의 기준을 제시합니다.
Q. AA와 AAA 기준의 차이는 무엇인가요?
A. AA는 최소 준수 기준으로 일반 텍스트 4.5:1, 큰 텍스트 3:1이 필요합니다. AAA는 강화 기준으로 일반 텍스트 7:1, 큰 텍스트 4.5:1이 요구됩니다. 대부분의 웹사이트는 AA 준수를 목표로 합니다.
Q. 큰 텍스트(Large Text)의 기준은 무엇인가요?
A. WCAG에서 큰 텍스트는 14pt(약 18.67px) 이상의 볼드(굵은) 텍스트 또는 18pt(24px) 이상의 일반 텍스트를 의미합니다. 큰 텍스트는 낮은 대비율 기준(3:1)이 적용됩니다.
Q. 왜 4.5:1이 AA 기준인가요?
A. 4.5:1 비율은 중간 정도의 시력 저하(약 20/40 시력)를 가진 사람이 일반 텍스트를 읽을 수 있는 최소 대비 수준을 기반으로 설정되었습니다. 이는 약 2% 명도 차이에 해당합니다.
Q. 낮은 대비를 어떻게 개선하나요?
A. 전경색을 더 어둡게 하거나 배경색을 더 밝게 조정하세요. 텍스트에 그림자를 추가하거나 텍스트 크기를 키우는 것도 기준 충족에 도움이 됩니다. 이 도구의 색상 선택기로 실시간으로 확인하며 조정할 수 있습니다.
Q. 장식용 요소도 대비 기준을 충족해야 하나요?
A. 아니요. WCAG는 순수 장식 목적의 이미지나 텍스트, 비활성 UI 컴포넌트(disabled), 로고 내 텍스트는 대비 기준 적용 대상에서 제외합니다. 정보 전달 목적의 요소만 기준이 적용됩니다.
Q. 색맹(색각 이상) 사용자를 위한 고려사항은?
A. 높은 명도 대비를 유지하면 색맹 사용자에게도 콘텐츠를 잘 전달할 수 있습니다. 색상만으로 정보를 전달하지 않고 패턴, 아이콘, 텍스트를 병행하는 것이 좋습니다.
Q. 자동화된 접근성 검사 도구에는 무엇이 있나요?
A. axe, Lighthouse(Chrome DevTools), WAVE, Colour Contrast Analyser 등을 사용해 페이지 전체의 색상 대비를 자동으로 검사할 수 있습니다. CI/CD 파이프라인에 통합하면 배포 전 접근성을 자동 검증할 수 있습니다.
Q. 명암비 계산 공식은 무엇인가요?
A. 상대 휘도 L1(밝은 색), L2(어두운 색)을 사용해 (L1 + 0.05) / (L2 + 0.05) 공식으로 계산합니다. 예: 흰색(L=1.0)과 검정(L=0)의 대비는 (1+0.05)/(0+0.05) = 21:1입니다.
Q. 그래픽이나 아이콘에도 명암비 기준이 적용되나요?
A. 네. WCAG 1.4.11(비텍스트 대비)에 따라 UI 컴포넌트 경계선과 필수 그래픽 요소는 인접 색상과 최소 3:1 대비가 필요합니다. 텍스트 기준(4.5:1)보다는 낮지만 별도로 검사해야 합니다.