색상 대비 검사기

이 도구 정보

foreground와 background 색상의 contrast ratio를 계산해 WCAG 2.2 AA·AAA 기준을 확인하고, 실패할 경우 원래 색상과 가까운 통과 Hex 대안을 제안합니다. CSS 또는 design-token palette를 로컬로 검사할 수 있고 선택적으로 공개 URL의 렌더링된 색상 조합을 수집합니다.

색상 대비는 접근성의 한 부분일 뿐입니다. keyboard, semantics, focus, zoom과 assistive technology 동작은 별도로 검토해야 합니다.

기능

• 일반 text와 large text에 대한 WCAG 2.2 AA·AAA contrast ratio 판정
• 현재 hue를 가능한 한 유지하는 가까운 통과 foreground·background Hex 제안
• 붙여 넣은 CSS와 design token의 색상 pair를 브라우저에서 로컬 일괄 검사
• 선택형 공개 URL render에서 관찰된 text·background 조합과 selector context 수집

작동 방식

sRGB 값을 linear luminance로 변환해 밝은 색과 어두운 색의 상대 휘도 비율을 계산합니다. text size와 weight에 맞는 WCAG 2.2 threshold와 비교하고, 실패 시 색 공간을 탐색해 최소 변화의 통과 후보를 찾습니다. CSS·URL 결과는 실제 component 상태와 함께 사람이 검토합니다.

제한사항

• gradient, image background, transparency, blend mode와 상태 변화는 단일 색상 pair 계산만으로 정확히 평가되지 않을 수 있습니다.
• 가까운 Hex 대안은 수학적 대비를 통과해도 brand system이나 시각적 hierarchy에 맞는지 designer가 검토해야 합니다.
• 통과 결과는 페이지 전체의 WCAG 준수나 실제 사용자 접근성을 증명하지 않습니다.

자주 묻는 질문