명암비 검사기
WCAG 색상 대비 비율 확인
명암비 검사기 사용 방법
WCAG 색상 대비 비율 확인 무료 온라인 도구, 회원가입 없음, 광고 없음. 지금 바로 무료로 사용하세요.
색상 대비가 중요한 이유는?
약 8%의 남성과 0.5%의 여성이 색각 이상을 가지고 있습니다. 더 많은 사람들이 어려운 조건(밝은 햇빛, 저품질 화면, 눈 피로, 노화로 인한 시력 저하)에서 텍스트를 읽습니다. 충분한 색상 대비는 모든 사용자가 시각적 조건에 관계없이 콘텐츠를 읽을 수 있도록 합니다.
- 웹 접근성 준수: WCAG 2.1은 최소 대비율을 정의합니다. 한국의 웹 접근성 지침(KWCAG)은 WCAG를 기반으로 하며 공공기관 웹사이트와 앱에 적용됩니다. 장애인차별금지법에 따라 공공 서비스의 웹 접근성 준수가 의무화되어 있습니다.
- 설계 단계에서 검증: 피그마나 스케치에서 개발 전에 텍스트/배경 색상 조합을 확인합니다. 출시 후에 수정하는 것보다 훨씬 비용이 적게 듭니다.
- 컴포넌트 라이브러리: 디자인 시스템의 모든 색상 조합이 모든 사용 컨텍스트에서 접근성 요구사항을 충족하는지 확인합니다.
- 다크 모드: 다크 모드를 구현할 때 밝은 배경에서 작동한 색상이 어두운 배경에서는 실패하는 경우가 많습니다. 각 모드를 독립적으로 확인하세요.
- 데이터 시각화: 차트의 색상이 색각 이상 사용자도 구별할 수 있고 다양한 배경색에서 가독성이 있는지 확인합니다.
WCAG 수준: AA(정상 텍스트에 4.5:1 이상, 큰 텍스트에 3:1 이상)는 대부분의 규정 표준이며 상업적 웹사이트에 권장됩니다. AAA(7:1 이상)는 최대 접근성을 위한 수준입니다.
WCAG AA에 필요한 대비율은 얼마인가요?
WCAG AA는 정상 텍스트(18pt 미만 또는 14pt 굵게 미만)에 최소 4.5:1, 큰 텍스트(18pt 이상 또는 14pt 굵게 이상)에 3:1이 필요합니다. UI 컴포넌트와 그래픽 요소(아이콘, 폼 테두리)에도 3:1이 필요합니다.
대비율은 어떻게 계산되나요?
대비율 = (L1 + 0.05) / (L2 + 0.05), 여기서 L1은 더 밝은 색상의 상대적 휘도, L2는 더 어두운 색상입니다. 최대 대비는 21:1(흰색 위의 검정). 1:1 대비율은 대비가 없음을 의미합니다.
색상 대비와 색각 이상은 어떻게 다른가요?
대비율은 모든 사용자에게 영향을 미치는 휘도 차이를 측정합니다. 색각 이상은 반드시 휘도에 영향을 주지 않고 색상 구별에 영향을 미칩니다. 높은 대비의 빨강-초록 디자인이 휘도 테스트는 통과하지만 적록 색각 이상 사용자에게는 구별하기 어려울 수 있습니다.
글꼴 굵기가 대비 요구사항에 영향을 미치나요?
네. 굵고 큰 텍스트는 본질적으로 더 읽기 쉬우므로 요구사항이 낮습니다. WCAG AA는 18pt(24px) 이상 또는 14pt(약 18.67px) 굵게 이상의 텍스트에 3:1을 요구합니다. 작거나 굵지 않은 텍스트에는 4.5:1이 필요합니다.
KWCAG(한국형 웹 콘텐츠 접근성 지침)란?
KWCAG는 행정안전부가 제정한 한국의 웹 접근성 지침으로 WCAG를 기반으로 합니다. 공공기관 웹사이트는 의무적으로 준수해야 하며, 색상 대비도 주요 검사 항목 중 하나입니다. 웹 접근성 연구소(www.wah.or.kr)에서 관련 가이드라인과 인증 정보를 확인할 수 있습니다.
대비 검사기 vs 색각 이상 시뮬레이터 vs 접근성 감사
대비 검사기는 두 색상 사이의 휘도 비율을 검증합니다. 색각 이상 시뮬레이터(Chrome DevTools, Coblis)는 다양한 시각 조건에서 디자인이 어떻게 보이는지 표시합니다. 전체 접근성 감사(axe, Lighthouse, WAVE)는 모든 WCAG 위반을 위해 전체 페이지를 스캔합니다. 완전한 접근성을 위해: 디자인 단계에서 대비 확인, 게시 전 색각 이상 시뮬레이션, 프로덕션 사이트에서 자동화된 감사 실행.