개요 WCAG 대비
비율 및 AA/AAA 판정
사용 방법
두 색상을 입력하면 WCAG 대비 비율이 표시되고, 텍스트와 UI 요소에 대한 AA·AAA 통과 여부가 즉시 판정됩니다.
WCAG 대비
WCAG 대비 기준
WCAG AA는 본문 4.5:1, 큰 텍스트 3:1 이상을 요구합니다. AAA는 7:1과 4.5:1로 기준을 높입니다.
큰 텍스트는 18pt 일반 또는 14pt 굵은 글씨 이상입니다. UI 아이콘과 포커스 표시도 배경 대비 3:1을 충족해야 합니다.
확인과 수정
텍스트와 배경 색을 입력하거나, 색상과 채도를 유지한 채 슬라이더로 밝기를 조정합니다.
제안 패널은 AA를 충족하는 가까운 색을 제시합니다. 선택하고 복사한 뒤 실제 배경 이미지나 오버레이에서 다시 확인하세요.
자주 묻는 질문
AA와 AAA의 차이는?
AA는 기본 접근성 수준, AAA는 더 엄격합니다. 긴 글에는 AAA, 제품 UI에는 AA가 일반적입니다.
큰 텍스트의 기준은?
18pt(24px) 또는 14pt(18.66px) 굵은 글씨 이상입니다. 본문보다 낮은 대비 비율이 허용됩니다.
브라우저에서 비율이 다른 이유는?
브라우저가 투명도, 오버레이, 이미지 배경을 적용하기 때문입니다. 선언값뿐 아니라 최종 렌더링 색을 측정하세요.
이 색을 실제 서비스에 쓸 수 있나요?
가능합니다. 일반 HEX 색입니다. 비활성과 호버 상태를 포함해 실제 맥락에서 다시 확인하세요.