색상 대비 검사기

사용 방법

이 도구는 WCAG 2.1 지침에 따라 두 색상의 명도 대비율을 계산하고 색상 조합이 접근성 기준을 충족하는지 나타냅니다.

사용 방법:

1. 텍스트 색상과 배경 색상을 16진수, RGB 또는 색상 선택기로 입력합니다.
2. 도구가 즉시 명도 대비율을 표시합니다.
3. 결과가 AA 수준(일반 텍스트 4.5:1) 또는 AAA 수준(7:1)을 충족하는지 확인합니다.

예시: 검정 텍스트(#000000)를 흰색 배경(#FFFFFF)에 → 명도 대비율 21:1 (AAA).

제한사항: 이 도구는 텍스트/배경 명도 대비만 평가합니다. 모든 WCAG 접근성 기준을 다루지는 않습니다.

개인정보 보호: 데이터가 전송되지 않습니다. 모든 것이 로컬에서 계산됩니다.

실전 예시

흰 배경 위 회색 글자 #767676 을 검사하면: 대비율은 정확히 4.54:1 — 일반 텍스트의 WCAG AA(4.5:1 필요)는 통과하지만 AAA(7:1)는 탈락이며, 결과 카드는 큰 글자의 완화 규칙까지 포함해 각 기준을 따로 보여줍니다. 로그 눈금 막대는 이 조합이 1:1과 순수 흑백의 21:1 사이 어디에 있는지 보여줍니다. APCA 카드는 WCAG 3 지표를 미리 맛보게 하고, 교환 버튼은 전경과 배경을 뒤집으면 나아지는지 즉답합니다. 실시간 미리보기는 실제 텍스트를 그려 직접 눈으로 판단하게 합니다.

활용 사례

• 웹사이트 리디자인을 배포하기 전에 브랜드 색상 팔레트의 접근성 준수 확인
• 어두운 테마나 밝은 테마에서도 읽기 쉬운 버튼 및 링크 색상 선택
• Section 508, EN 301 549, ADA 준수를 위한 WCAG 2.1 AA 또는 AAA 요구사항 충족
• 개발 시작 전에 디자이너가 보낸 목업을 검토해 읽을 수 없는 텍스트를 표시
• 작은 휘도 차이가 어떻게 큰 대비 실패를 초래하는지 보여주며 접근성 개념 교육