🌗 색상 대비 검사기 (WCAG AA / AAA)

소개

WCAG(웹 콘텐츠 접근성 가이드라인) 대비율 공식은 IEC 61966-2-1 sRGB 표준을 기반으로 각 색상의 상대적 휘도를 계산한 뒤 두 색상 간의 밝기 차이를 구합니다. 일반 텍스트(16 px)는 4.5:1 이상이면 AA, 7:1 이상이면 AAA를 충족합니다. 큰 텍스트(24 px 또는 굵은 18.67 px)는 기준이 완화되어 AA는 3:1, AAA는 4.5:1 이상입니다. 이 도구는 WCAG 2.x 알고리즘 전체를 브라우저 안에서만 실행합니다. 서버 전송, 계정 가입, 추적이 없으며 마지막 색상 조합은 로컬에 저장되어 다음 방문 시에도 유지됩니다.

사용 방법

1. 텍스트 색상 필드에서 컬러 피커를 사용하거나 헥스 코드(예: #1a2b3c)를 직접 입력하세요.
2. 배경 색상 필드에서도 같은 방법으로 색상을 선택하세요. 색상 교체 버튼으로 두 색상을 빠르게 뒤바꿀 수 있습니다.
3. 크게 표시된 대비율을 확인하고, 일반 텍스트와 큰 텍스트 각각에 대한 AA·AAA 합격·불합격 배지 4개를 확인하세요.
4. 실시간 미리보기 영역에서 선택한 배경색 위에 텍스트가 실제로 어떻게 보이는지 확인한 후 디자인을 확정하세요.

자주 묻는 질문

이 WCAG 대비 검사기는 무료인가요?

네, 완전히 무료입니다. 회원가입, 결제, 사용 제한이 없습니다. 페이지를 열고 바로 색상을 확인하세요.

인터넷 연결 없이 오프라인에서도 사용할 수 있나요?

네. 모든 계산은 자바스크립트로 브라우저 안에서 실행됩니다. 페이지를 한 번 로드한 후에는 인터넷을 끊어도 계속 사용할 수 있으며, 어떤 데이터도 서버로 전송되지 않습니다.

입력한 색상 데이터는 안전한가요? 업로드되나요?

입력한 색상은 브라우저 밖으로 나가지 않습니다. 색상 데이터에 대한 분석, 업로드, 제3자 공유가 전혀 없습니다. 마지막 색상 조합은 브라우저의 로컬 스토리지에만 저장됩니다.

WCAG AA와 AAA의 차이는 무엇인가요?

AA는 대부분의 법적 규정(ADA, EN 301 549 등)이 요구하는 최소 기준으로, 일반 텍스트는 4.5:1, 큰 텍스트(24 px 또는 굵은 18.67 px)는 3:1 이상이어야 합니다. AAA는 강화된 접근성 기준으로 일반 텍스트는 7:1, 큰 텍스트는 4.5:1 이상을 요구합니다. 실제 서비스 디자인에서는 최소한 AA를 목표로 하세요.

#fff처럼 3자리 헥스 코드도 입력할 수 있나요?

네. 3자리 단축 형식(#rgb)과 6자리 전체 형식(#rrggbb) 모두 지원합니다. 색상을 입력하거나 붙여넣으면 자동으로 변환되어 검사합니다.