색상 대비 검사기 완벽 가이드
웹 접근성은 모든 사용자가 웹 콘텐츠를 동등하게 이용할 수 있도록 보장하는 핵심 원칙입니다. 그중에서도 색상 대비(Color Contrast)는 시각적 가독성을 결정짓는 가장 기본적인 요소로, WCAG(Web Content Accessibility Guidelines) 국제 표준에서 명확한 기준을 제시하고 있습니다. 이 도구는 전경색(글자색)과 배경색의 대비율을 WCAG 2.1 공식에 따라 정밀하게 계산하여 AA 및 AAA 등급 적합 여부를 즉시 판별해 줍니다.
대비율은 두 색상의 상대적 밝기(Relative Luminance)를 기반으로 산출되며, 최소 1:1(동일색)에서 최대 21:1(검정/흰색)까지의 범위를 가집니다. WCAG AA 기준은 일반 텍스트에 4.5:1 이상, 큰 텍스트(18pt 이상 또는 14pt 볼드)에 3:1 이상을 요구합니다. 더 엄격한 AAA 기준은 일반 텍스트 7:1, 큰 텍스트 4.5:1 이상을 충족해야 합니다.
색각 이상(색맹) 시뮬레이션 기능을 통해 제1색맹(적색맹, Protanopia), 제2색맹(녹색맹, Deuteranopia), 제3색맹(청색맹, Tritanopia) 사용자가 실제로 보는 색상 조합을 미리 확인할 수 있습니다. 전 세계 남성의 약 8%, 여성의 약 0.5%가 어떤 형태든 색각 이상을 가지고 있으므로, 다양한 사용자를 고려한 디자인은 필수적입니다. 대비율이 낮을 경우 자동으로 더 나은 색상 조합을 추천하여, 디자이너와 개발자가 접근성 기준을 쉽게 충족할 수 있도록 돕습니다.
자주 묻는 질문 (FAQ)
Q. WCAG AA와 AAA의 차이는 무엇인가요?
A. WCAG AA는 최소 접근성 기준으로, 일반 텍스트 대비율 4.5:1 이상을 요구합니다. AAA는 향상된 접근성 기준으로 7:1 이상의 대비율을 요구하며, 저시력 사용자에게 더 나은 가독성을 제공합니다. 대부분의 웹사이트는 AA 등급을 목표로 하지만, 공공기관이나 의료 서비스 등은 AAA 등급을 권장합니다.
Q. 큰 텍스트의 기준은 무엇인가요?
A. WCAG에서 큰 텍스트는 18pt(약 24px) 이상의 일반 텍스트 또는 14pt(약 18.66px) 이상의 볼드 텍스트를 의미합니다. 큰 텍스트는 일반 텍스트보다 낮은 대비율 기준이 적용되는데, 글자 크기가 커지면 인식하기 쉬워지기 때문입니다.
Q. 색맹 사용자를 위해 색상 외에 어떤 점을 고려해야 하나요?
A. 색상만으로 정보를 전달하지 않는 것이 핵심입니다. 아이콘, 패턴, 밑줄, 텍스트 레이블 등 색상 이외의 시각적 단서를 함께 사용하세요. 예를 들어, 오류 상태를 빨간색으로만 표시하는 대신 경고 아이콘과 텍스트 메시지를 함께 제공하는 것이 바람직합니다.
Q. 대비율 계산 공식은 어떻게 되나요?
A. 대비율은 (L1 + 0.05) / (L2 + 0.05) 공식으로 계산됩니다. L1은 밝은 색의 상대적 밝기, L2는 어두운 색의 상대적 밝기입니다. 상대적 밝기는 sRGB 값을 선형화한 후 R*0.2126 + G*0.7152 + B*0.0722 가중 평균으로 산출합니다.