웹 접근성과 WCAG 명도 대비 기준
웹 접근성을 준수하려면 텍스트와 배경색 간의 명도 대비(Contrast Ratio)가 일정 수준 이상이어야 합니다. WCAG 2.1 가이드라인에 따르면, 일반 텍스트는 최소 4.5:1(AA 등급) 또는 7:1(AAA 등급)의 비율을 충족해야 합니다.
이 도구는 입력된 두 색상의 상대적 휘도를 계산하여, 시력이 낮거나 색각 이상이 있는 사용자도 화면의 텍스트를 명확하게 읽을 수 있는지 객관적인 수치로 평가합니다.
텍스트 크기에 따른 요구 사항의 차이
텍스트가 크거나 굵으면 시각적으로 가독성이 높아지므로, 요구되는 최소 명도 대비 기준이 낮아집니다. 18pt(약 24px) 이상의 일반 텍스트 또는 14pt(약 18.5px) 이상의 굵은(Bold) 텍스트는 '큰 텍스트'로 분류됩니다.
큰 텍스트의 경우 AA 등급은 3:1, AAA 등급은 4.5:1의 비율만 넘으면 통과할 수 있습니다. 디자인 시 폰트의 크기와 두께를 함께 고려하여 적절한 색상 조합을 선택하는 것이 중요합니다.
안전하고 빠른 브라우저 기반 테스트
ToolMole의 색상 대비 계산기는 서버 통신 없이 100% 사용자의 웹 브라우저 내에서만 작동합니다. 따라서 작업 중인 프로젝트의 색상 코드가 외부로 유출될 위험이 전혀 없으며, 값을 입력하는 즉시 결과가 표시됩니다.
단, 이 도구는 단일 색상 값만 비교합니다. 그라데이션이나 배경 이미지 위에 텍스트가 있는 경우, 텍스트가 위치한 영역의 가장 어두운 부분이나 밝은 부분을 직접 스포이트 도구로 추출하여 입력해야 정확한 결과를 얻을 수 있습니다.
자주 묻는 질문
아이콘이나 UI 컴포넌트의 색상 대비도 확인할 수 있나요?
네, 가능합니다. WCAG 2.1 가이드라인에 따르면 입력 폼의 테두리나 중요한 아이콘 같은 비텍스트 UI 요소는 최소 3:1의 명도 대비를 충족해야 합니다. 전경색 입력란에 텍스트 색상 대신 해당 요소의 색상을 입력하여 이 기준을 확인하실 수 있습니다.
반투명한 색상(Alpha 값)을 사용하면 어떻게 되나요?
반투명한 색상은 배경색과 혼합되어 최종적으로 화면에 렌더링되는 불투명한 색상(Solid color)이 달라집니다. 정확한 대비를 계산하려면 스크린 캡처나 그래픽 프로그램의 스포이트 도구를 이용해 완전히 겹쳐진 상태의 최종 색상 코드를 추출한 뒤 입력해야 합니다.
디스플레이나 기기별 색상 프로필에 따라 결과가 달라지나요?
이 계산기는 순수하게 입력된 CSS 색상 코드(sRGB 기준)의 수학적 휘도 공식을 기반으로 작동합니다. 따라서 개별 모니터의 캘리브레이션이나 기기별 렌더링 차이는 반영하지 않으며, 웹 표준에 따른 코드 상의 대비 비율만 평가합니다.
한 번에 여러 색상 조합을 테스트할 수 있나요?
현재 버전에서는 한 번에 한 쌍의 전경색(텍스트)과 배경색만 비교할 수 있습니다. 여러 조합이 필요한 디자인 시스템을 구축 중이시라면, 사용할 메인 색상과 배경색을 하나씩 번갈아 가며 입력하여 각각의 가독성을 검증해야 합니다.
이 도구에 문제가 있거나 제안할 아이디어가 있나요? 의견 보내기