색 대비 검사기
두 가지 색을 입력하면 WCAG 대비 비율과 AA·AAA 안내를 즉시 확인할 수 있습니다.
hex 또는 RGB로 전경색과 배경색을 입력하면 WCAG 대비 비율을 즉시 계산하고 AA/AAA 결과, 텍스트 미리보기, 선택적 조정 제안을 제공합니다.
이 색 대비 검사기 사용 방법
전경색과 배경색을 입력하거나 붙여넣으세요. 유효한 입력은 대문자 hex로 정규화되고 WCAG 대비 비율이 즉시 계산되며 AA·AAA 임계값에 대한 통과/미통과가 표시됩니다. 수정 제안, URL 공유, 초기화를 사용할 수 있습니다.
WCAG 대비 비율 임계값
WCAG 2.x는 일반 텍스트 AA 4.5:1 이상, 큰 글자 AA 3:1 이상, 일반 텍스트 AAA 7:1 이상, 큰 글자 AAA 4.5:1 이상을 요구합니다. 이 도구는 네 가지 결과를 항상 표시합니다.
지원 색 형식
#RGB, #RRGGBB, rgb(r,g,b) 또는 쉼표로 구분한 r,g,b를 입력하세요. 채널은 0–255 정수여야 합니다. v1에서는 알파, 8자리 hex, HSL/HSLA, CSS 이름 색상을 지원하지 않습니다.
통과와 미통과의 의미
통과는 계산된 비율이 해당 수준 임계값 이상임을, 미통과는 미달임을 의미합니다. 색만으로 전달되지 않도록 라벨과 아이콘을 함께 표시합니다.
자주 묻는 질문
알파와 그라데이션을 지원하지 않는 이유는?
v1은 완전 불투명 sRGB 색만 평가합니다. 알파 혼합과 그라데이션은 아직 모델링하지 않은 합성 규칙이 필요하므로 rgba(), 8자리 hex, 그라데이션 분석은 MVP 범위 밖입니다.
대비 비율은 어떻게 계산되나요?
불투명 sRGB에 대한 WCAG 상대 휘도 공식을 사용합니다. 채널을 선형화하고 휘도를 구한 뒤 (밝은 쪽 + 0.05) / (어두운 쪽 + 0.05)를 적용합니다. 표시는 소수 둘째 자리, 임계값 판정은 전체 값을 사용합니다.
수정 제안은 무엇을 하나요?
선택한 전경 또는 배경색을 검은색 또는 흰색 방향 밝기 경로로 결정적으로 이동해 선택한 WCAG 수준을 충족시키고, 가능하면 가장 가까운 적합 hex와 결과 비율을 반환합니다.
특정 색 조합을 공유할 수 있나요?
예. 유효한 전경, 배경, 글자 크기가 URL 매개변수(?fg=000000&bg=FFFFFF&size=normal 등)에 동기화되어 결과에 직접 링크할 수 있습니다.
페이지가 내 색을 저장하나요?
계산은 브라우저에서만 실행됩니다. 마지막 유효 색 쌍이 편의를 위해 localStorage에 저장될 수 있으며, 초기화로 입력·URL·저장 상태를 지울 수 있습니다.