색상 대비 검사기
전경색과 배경색을 입력하여 일반 및 큰 텍스트에 대한 AA 및 AAA 통과/실패 배지와 함께 WCAG 대비비를 확인합니다.
21.00:1
AA
Normal text
AA
Large text
AAA
Normal text
AAA
Large text
Preview
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
사용 방법
색상 선택기를 사용하거나 hex 값을 직접 입력하여 전경색과 배경색을 선택합니다. 도구는 WCAG 2.1 공식 — 감마 디코딩 후 sRGB 채널의 가중 합 — 을 사용해 각 색상의 상대 휘도를 계산하고, 밝은 휘도를 어두운 휘도로 나눕니다 (순수 검정의 0 나눗셈을 피하기 위해 분자와 분모에 0.05 추가). 결과 대비비는 1:1 (동일한 색)부터 21:1 (순흑백)까지입니다. 네 개의 WCAG 배지가 통과 또는 실패를 표시합니다: 일반 텍스트용 AA (≥ 4.5:1), 큰 텍스트용 AA (≥ 3:1), 일반 텍스트용 AAA (≥ 7:1), 큰 텍스트용 AAA (≥ 4.5:1). 실시간 미리보기 패널은 일반 및 큰 텍스트의 샘플 문장을 표시하여 시각적으로 확인할 수 있습니다. 계산은 서버 호출 없이 브라우저에서 완전히 실행됩니다.
활용 사례
- 웹사이트 리디자인을 배포하기 전에 브랜드 색상 팔레트의 접근성 준수 확인
- 어두운 테마나 밝은 테마에서도 읽기 쉬운 버튼 및 링크 색상 선택
- Section 508, EN 301 549, ADA 준수를 위한 WCAG 2.1 AA 또는 AAA 요구사항 충족
- 개발 시작 전에 디자이너가 보낸 목업을 검토해 읽을 수 없는 텍스트를 표시
- 작은 휘도 차이가 어떻게 큰 대비 실패를 초래하는지 보여주며 접근성 개념 교육