디자인
WCAG 색상 대비 검사기
전경색과 배경색의 WCAG 대비율을 계산하고 일반·큰 텍스트의 AA·AAA 및 그래픽·UI의 AA 결과를 보여 줍니다.
WCAG 색상 대비 검사기
두 HEX 색상의 WCAG AA·AAA 대비 충족 여부를 확인합니다.
- 1입력
- 2실행
- 3결과
이 기기에서만 처리
결과
실행하면 여기에 결과가 표시됩니다.
사용 예제
- #000000 / #FFFFFF → 21:1
- #777777 / #FFFFFF → 약 4.48:1
정확도와 제약
- 단색 전경과 단색 배경의 수학적 대비만 계산하며 이미지, 그라데이션, 투명도 합성은 제한적으로 다룹니다.
- 접근성 적합성은 글자 크기, 굵기, 상태 변화, 실제 사용 맥락도 함께 검토해야 합니다.
자주 묻는 질문
AA와 AAA의 차이는 무엇인가요?
AAA가 더 높은 대비를 요구합니다. 도구는 일반 텍스트와 큰 텍스트 기준을 나누어 결과를 표시합니다.
통과 색상이면 사이트 전체가 접근성 기준을 만족하나요?
아니요. 색상 대비는 여러 접근성 요구사항 중 하나이므로 키보드 조작, 레이블, 구조 등도 확인해야 합니다.
그래픽·UI AA는 무엇을 확인하나요?
의미 있는 아이콘, 입력창 테두리 같은 비텍스트 요소가 인접 색상과 최소 3:1 대비를 갖는지 확인합니다.