개발 도구 · 브라우저 실행
색상 피커 · 조합
전경·배경 색상의 WCAG 대비비·통과 기준·추천 글자색·조화색을 계산합니다.WCAG contrast inspector
전경·배경 색상의 대비비와 조화색을 함께 확인합니다
가독성 확인 Aa
본문 텍스트와 버튼 라벨의 실제 크기·굵기에서도 확인하세요.
대비비는 sRGB 기준입니다. 글자 크기·굵기, focus·hover·disabled 상태와 색상 외 구분 수단도 함께 검토하세요.
전경과 배경의 WCAG 대비를 계산했습니다.
빠른 사용법
세 단계로 확인합니다.
- 1전경과 배경 HEX를 정합니다
직접 입력·프리셋·지원 브라우저 EyeDropper로 두 sRGB 색상을 선택합니다.
- 2대비비와 WCAG 기준을 확인합니다
일반 글자 AA 4.5:1·AAA 7:1, 큰 글자 AA 3:1 기준과 추천 흑백 글자색을 봅니다.
- 3실제 컴포넌트 상태를 검수합니다
글자 크기·굵기와 hover·focus·disabled·오류 상태, 색상 외 표시를 함께 확인합니다.
결과 읽기
대비비 하나는 접근성 검토의 시작점이지 전체 판정이 아닙니다.
WCAG 명도 대비는 텍스트·아이콘 식별에 중요하지만 실제 글자 크기, 배경 이미지, 투명도, focus 표시와 사용자 테스트가 함께 필요합니다.LUM상대 명도
sRGB 채널을 선형화해 0~1 상대 명도를 계산합니다.
RATIO대비비
밝은 명도+0.05를 어두운 명도+0.05로 나눠 1:1~21:1을 구합니다.
STATE상태별 확인
기본 상태만 통과해도 focus·hover·disabled에서 대비가 낮아질 수 있어 각각 재검사해야 합니다.
이 도구는 sRGB 불투명 단색 두 개를 계산합니다. 이미지·gradient·alpha 합성·글자 외 UI component 기준과 최신 WCAG 적용 범위는 별도로 확인하세요.
이럴 때 유용합니다.
- 본문·버튼 글자 대비
- dark mode 색상 교환
- 보색·명도 조화색 초안
함께 확인하세요.
- 글자 크기·굵기 별도 확인
- gradient·이미지·alpha 미지원
- 색상 외 focus·상태 표시 필요
자주 묻는 질문
사용 전 알아둘 점
4.5:1이면 모든 텍스트가 통과하나요?
일반 텍스트 AA 기준에는 해당하지만 크기·굵기·상태와 다른 성공 기준을 함께 확인해야 합니다.
EyeDropper가 보이지 않는 이유는 무엇인가요?
브라우저·보안 컨텍스트에 따라 API가 지원되지 않을 수 있으며 직접 HEX 입력을 사용할 수 있습니다.
결과를 인증서처럼 사용할 수 있나요?
아닙니다. 자동 계산 참고이며 실제 UI 전체 접근성 감사와 사용자 테스트가 필요합니다.