색상 대비 검사기
KWCAG 2.2 5.4.3 텍스트 콘텐츠의 명도 대비 기준으로 글자색과 배경색의 대비율을 계산합니다.
결과
이 도구가 검사하는 것
- 단색 글자와 단색 배경의 대비율
- 반투명 글자를 단색 배경과 합친 색의 대비율
- 일반 글자 4.5:1, 큰 글자 3:1 기준 충족 여부
이 도구가 못 하는 것
- 그라데이션·배경 이미지 위 글자 → 확인 필요 눈으로 확인하세요
- 반투명 배경(뒤에 무엇이 있는지 알 수 없음)
- 실제 웹페이지의 색을 자동으로 읽기
기준 알아두기
- 일반 글자: 4.5:1 이상
- 큰 글자: 3:1 이상. 18pt(약 24px) 이상, 또는 굵은 14pt(약 18.66px) 이상
- 예외: 로고, 장식 목적의 콘텐츠, 마우스나 키보드로 초점을 받았을 때 대비가 커지는 콘텐츠는 기준을 적용하지 않습니다.
- 화면 확대가 가능한 글자: 화면 확대가 가능하도록 구현한 글자는 3:1까지 낮출 수 있습니다. 이 경우 큰 글자 기준(3:1) 결과를 참고하세요.
- 글자가 들어간 이미지도 같은 기준을 적용합니다.
- 대비율은 소수 둘째 자리에서 버림해 표시합니다. 4.499:1은 4.49:1로 표시되며 통과가 아닙니다.
국제 권장: 버튼 테두리·아이콘 대비
국제 권장 WCAG 2.2(1.4.11 비텍스트 대비)는 입력 칸 테두리, 아이콘, 초점 표시처럼 글자가 아닌 요소도 주변 색과 3:1 이상을 권장합니다. KWCAG 33개 항목의 결과와는 별개입니다. 위 도구에 테두리 색과 바깥 배경색을 넣고, 큰 글자 기준(3:1)으로 확인할 수 있습니다.
자주 묻는 질문
웹접근성 명도 대비 기준은 몇 대 몇인가요?
KWCAG 2.2 5.4.3 텍스트 콘텐츠의 명도 대비 기준은 일반 글자 4.5:1 이상, 큰 글자 3:1 이상입니다.
큰 글자의 기준은 무엇인가요?
18pt(약 24px) 이상이거나, 굵은 글꼴(bold)로 14pt(약 18.66px) 이상인 글자를 큰 글자로 봅니다. 큰 글자는 3:1 이상이면 됩니다.
대비율은 어떻게 계산하나요?
두 색의 상대 휘도(L)를 구해 (밝은 색 L + 0.05) ÷ (어두운 색 L + 0.05)로 계산합니다. 결과는 1:1(같은 색)부터 21:1(검정과 흰색)까지입니다. 이 도구는 소수 둘째 자리에서 버림해 표시하므로 4.499:1은 4.49:1로 나와 기준 미달로 판정됩니다.
#767676과 흰색 배경은 기준을 통과하나요?
네. #767676과 #ffffff의 대비율은 약 4.54:1로 일반 글자 기준 4.5:1을 넘습니다. 한 단계 밝은 #777777은 약 4.48:1로 기준에 못 미칩니다.
반투명 색이나 그라데이션 위 글자는 어떻게 검사하나요?
반투명 글자색은 뒤의 단색 배경과 합친 색으로 계산합니다. 배경이 반투명이거나 그라데이션·이미지인 경우 실제로 보이는 색을 정확히 알 수 없으므로 "확인 필요"로 안내하며, 가장 대비가 낮은 부분의 색을 직접 골라 확인해야 합니다.