사용 방법
- 색상 선택기를 사용하거나 HEX 코드를 입력해 배경색과 글자색을 설정합니다.
- 4.50:1 같은 숫자로 표시되는 대비율을 읽고 미리보기 카드를 확인합니다.
- 일반 텍스트 AA, 큰 텍스트 AA, 일반 텍스트 AAA의 PASS 또는 FAIL 배지를 확인합니다.
이 검사기는 웹 콘텐츠 접근성 지침(WCAG)이 정의하는 방식으로 대비율을 계산합니다. 각 색을 sRGB 공식으로 상대 휘도로 변환하고, 대비율은 밝은 쪽 휘도에 0.05를 더한 값을 어두운 쪽 휘도에 0.05를 더한 값으로 나눈 것입니다. 결과는 소수 둘째 자리까지 표시되며, 같은 색이면 1:1, 흰색 위의 검정이면 최대 21:1입니다. 기본 색은 흰색과 검정입니다.
결과는 세 가지로 표시됩니다. AA 등급의 일반 텍스트는 대비율 4.5 이상이 필요합니다. AA 등급의 큰 텍스트는 3 이상이 필요합니다. AAA 등급의 일반 텍스트는 7 이상이 필요합니다. 각각 PASS 또는 FAIL로 표시됩니다. 대비율 자체도 색으로 구분됩니다. WCAG에서 큰 텍스트란 대략 18pt 일반 굵기 또는 14pt 굵은 글씨를 뜻하므로, 글자 크기가 그 정도일 때만 큰 텍스트 결과를 참고하세요.
미리보기 카드는 두 색으로 제목과 샘플 문장을 보여 주므로 숫자뿐 아니라 색도 눈으로 판단할 수 있습니다. 점수가 통과해도 가독성이 좋다고 보장되지는 않습니다. 글꼴 굵기, 크기, 주변 요소도 영향을 주기 때문입니다.
색은 6자리 HEX 코드로 입력해야 합니다. 계산은 브라우저에서 이루어집니다.
자주 묻는 질문
어느 정도의 대비율이 필요한가요?
WCAG AA에서는 일반 텍스트 4.5:1, 큰 텍스트 3:1이 필요합니다. AAA에서는 일반 텍스트 7:1이 필요합니다. 도구가 각각의 결과를 보여 줍니다.
큰 텍스트는 무엇을 말하나요?
WCAG에서는 약 18pt 이상이거나 14pt 이상의 굵은 텍스트를 말합니다.
어느 색을 어디에 넣어야 하나요?
도구는 한 색을 배경, 다른 색을 글자로 취급하지만, 대비율은 어느 쪽이든 같습니다.
짧은 HEX 코드가 작동하지 않는 이유는 무엇인가요?
#333이 아니라 #333333처럼 6자리 전체 형식으로 입력하세요.
텍스트가 아닌 요소도 검사하나요?
텍스트 기준만 제공합니다. 대비율이 표시되므로 인터페이스 구성요소의 3:1 지침과 직접 비교할 수 있습니다.