색상 대비 검사기 (WCAG)
전경·배경 명암비를 계산하고 WCAG AA/AAA를 판정
큰 텍스트 샘플 Aa
일반 텍스트 샘플입니다. 이 문장으로 가독성을 확인하세요.
모든 계산은 브라우저에서만 처리되며 서버로 전송·저장되지 않습니다.
색상 대비 검사기란?
색상 대비 검사기는 전경색(텍스트)과 배경색 두 가지 색상의 명암비(contrast ratio)를 계산해 WCAG 2.1 접근성 기준을 통과하는지 즉시 확인하는 도구입니다. 색상 코드를 입력하거나 색상 선택기로 고르면 명암비와 실시간 미리보기가 바로 반영됩니다.
WCAG 기준 설명
- 일반 텍스트: AA 4.5:1 이상, AAA 7:1 이상
- 큰 텍스트(18pt 이상 또는 굵게 14pt 이상): AA 3:1 이상, AAA 4.5:1 이상
개인정보·처리 방식
모든 계산은 사용자의 브라우저 안에서만 이루어집니다. 입력한 색상값은 서버로 전송되거나 저장되지 않습니다.
대비율은 어떻게 계산되나요? — 상대 휘도의 원리
명암비 계산은 사람이 색을 인식하는 방식에 가까운 상대 휘도(relative luminance)를 먼저 구하는 데서 시작합니다. R·G·B 각 채널값(0~255)을 255로 나눈 뒤, 값이 0.03928 이하면 선형으로, 초과하면 감마 보정 공식 ((값+0.055)÷1.055)^2.4로 변환합니다. 이렇게 얻은 세 채널 값에 0.2126×R + 0.7152×G + 0.0722×B 가중치를 곱해 더하면 상대 휘도가 나오는데, 초록(G) 채널의 가중치가 압도적으로 큰 이유는 사람 눈의 원추세포가 초록색 파장 변화에 가장 민감하기 때문입니다. 두 색의 상대 휘도가 정해지면 (더 밝은 휘도+0.05)÷(더 어두운 휘도+0.05)로 명암비를 계산하며, 이 도구는 이 공식을 자바스크립트로 그대로 구현합니다.
회색 텍스트, 왜 특히 조심해야 할까 — 통과·실패 실례 검산
실무에서 접근성 기준에 가장 자주 걸리는 색은 의외로 극단적인 색이 아니라 중간 톤 회색 텍스트입니다. 눈으로 보기엔 충분히 진해 보여도 계산해보면 기준에 못 미치는 경우가 많습니다. 예를 들어 흰 배경(#ffffff) 위에 #999999 회색 텍스트를 올리면 명암비는 2.85:1로 일반 텍스트 AA 기준 4.5:1에 크게 못 미쳐 실패합니다. 같은 배경에 조금 더 어두운 #767676을 쓰면 명암비가 4.54:1로 올라 AA 기준을 근소하게 통과합니다. 위 도구에 두 조합을 직접 입력해 배지가 실패→통과로 바뀌는 것을 확인해 보세요. 이렇게 회색은 조금만 밝기를 조정해도 통과 여부가 뒤바뀌므로, 디자인 시안의 회색 텍스트는 감으로 판단하지 말고 항상 계산해서 확인하는 것이 안전합니다.