색상 대비 검사기
두 HEX 색상의 WCAG 대비율과 AA·AAA 텍스트 기준을 확인합니다.
입력
예시값이 입력되어 있습니다. 바로 확인하거나 값을 바꿔 보세요.
입력은 브라우저에서 처리합니다. 새로고침하면 예시값으로 돌아갑니다.
결과
입력된 예시값으로 바로 결과를 확인하거나 값을 바꿔 보세요.
WCAG 2의 일반 텍스트 AA 4.5:1, AAA 7:1과 큰 글자 AA 3:1을 표시합니다. 전체 접근성 준수 판정은 아닙니다.
결과 공유
도구 링크와 결과 텍스트를 함께 공유합니다. 결과는 URL에 넣지 않습니다. 아래 내용을 확인하고 공유하세요.
계산·변환 기준
글자색과 배경색의 WCAG 텍스트 대비율 확인하기.
대비율 = (밝은 상대휘도+0.05)/(어두운 상대휘도+0.05)
입력 예시
검정과 흰색 = 21:1
검정 #000000과 흰색 #FFFFFF의 대비율은 21:1입니다. 일반 텍스트 AA 기준 4.5:1과 큰 텍스트 AA 기준 3:1은 각각 별도로 표시합니다.
사용 방법
- 입력된 예시값을 사용하거나 글자 HEX, 배경 HEX 항목을 바꾸세요.
- 결과 확인하기를 누르고 아래 결과를 확인하세요.
- 필요하면 결과 복사로 가져갈 수 있습니다.
자주 묻는 질문
대비율 통과면 웹 접근성을 모두 충족하나요?
아닙니다. 불투명 단색 두 개의 텍스트 대비만 검사합니다. 실제 배경 이미지·투명도·상태별 색상·키보드 조작 등은 별도 확인이 필요합니다. 경계값은 반올림 전 비율로 판정합니다.
큰 텍스트는 어떤 크기를 뜻하나요?
WCAG의 큰 텍스트 기준은 일반 글꼴 18pt 이상 또는 굵은 글꼴 14pt 이상입니다. 대략 24 CSS px 또는 굵은 18.67 CSS px에 해당하며 실제 글꼴과 표시 상태도 확인하세요.
계산 기준과 참고 자료
- W3C — WCAG 2.2 텍스트 대비 기준
텍스트 크기에 따른 AA 대비 임계값과 반올림 전 판정