개발자 도구

색상 대비 검사기

접근성 기준에 비추어 텍스트가 실제로 읽기 쉬운지 확인합니다.

색상 대비 검사기 내 기기에서 실행

브라우저에서 실행됩니다 — 입력한 텍스트는 어디로도 전송되지 않습니다
가입 불필요, 사용량 제한 없음, 원하는 만큼 무료로 사용

작동 방식

흰 배경의 연한 회색 글씨는 웹에서 가장 흔한 접근성 문제이며, 충분히 피할 수 있습니다. 접근성 지침은 대비를 정확한 비율로 정의하므로, 색 조합이 통과하는지는 의견이 아니라 계산의 문제입니다.

비율을 계산하는 방법

각 색의 상대 휘도를 지침이 정한 방식(채널별 감마 보정 적용)으로 계산하고, 밝은 쪽과 어두운 쪽의 비율을 구합니다. 같은 공식이므로 접근성 감사에서 나오는 결과와 일치합니다.

기준값

일반 텍스트는 AA에서 4.5:1, AAA에서 7:1이 필요합니다. 큰 텍스트(대략 24px, 굵으면 18.7px)는 AA에서 3:1, AAA에서 4.5:1만 필요합니다. 인터페이스 구성 요소와 의미 있는 그래픽은 3:1이 필요합니다. 대부분의 조직과 법규가 요구하는 것은 AA입니다.

큰 텍스트는 기준이 낮은 이유

큰 글자는 획 하나를 이루는 픽셀이 더 많아서 대비가 낮아도 읽을 수 있습니다. 그래서 제목은 본문보다 더 연한 회색을 쓸 수 있습니다.

비율이 알려 주지 못하는 것

색맹은 별도의 검사 대상이어서 이 비율로는 알 수 없고, 글자가 충분히 큰지, 서체가 읽기 쉬운지도 알 수 없습니다. 통과한 비율은 최저선일 뿐, 읽기 좋은 디자인의 증거가 아닙니다.

자주 묻는 질문