색상 대비 검사기
전경색과 배경색을 입력하여 일반 및 큰 텍스트에 대한 AA 및 AAA 통과/실패 배지와 함께 WCAG 대비비를 확인합니다.
21.00:1
AA
보통 글자
AA
큰 글자
AAA
보통 글자
AAA
큰 글자
미리보기
다람쥐 헌 쳇바퀴에 타고파.
다람쥐 헌 쳇바퀴에 타고파.
사용 방법
이 도구는 WCAG 2.1 지침에 따라 두 색상의 명도 대비율을 계산하고 색상 조합이 접근성 기준을 충족하는지 나타냅니다.
사용 방법:
- 텍스트 색상과 배경 색상을 16진수, RGB 또는 색상 선택기로 입력합니다.
- 도구가 즉시 명도 대비율을 표시합니다.
- 결과가 AA 수준(일반 텍스트 4.5:1) 또는 AAA 수준(7:1)을 충족하는지 확인합니다.
예시: 검정 텍스트(#000000)를 흰색 배경(#FFFFFF)에 → 명도 대비율 21:1 (AAA).
제한사항: 이 도구는 텍스트/배경 명도 대비만 평가합니다. 모든 WCAG 접근성 기준을 다루지는 않습니다.
개인정보 보호: 데이터가 전송되지 않습니다. 모든 것이 로컬에서 계산됩니다.
활용 사례
- 웹사이트 리디자인을 배포하기 전에 브랜드 색상 팔레트의 접근성 준수 확인
- 어두운 테마나 밝은 테마에서도 읽기 쉬운 버튼 및 링크 색상 선택
- Section 508, EN 301 549, ADA 준수를 위한 WCAG 2.1 AA 또는 AAA 요구사항 충족
- 개발 시작 전에 디자이너가 보낸 목업을 검토해 읽을 수 없는 텍스트를 표시
- 작은 휘도 차이가 어떻게 큰 대비 실패를 초래하는지 보여주며 접근성 개념 교육
자주 묻는 질문
- WCAG 명도 대비율이란 무엇인가요?
- 두 색상의 상대 휘도를 기반으로 계산된 비율로 1:1(명도 대비 없음)에서 21:1(최대 명도 대비)까지 범위입니다.
- 접근성을 위한 최소값은 무엇인가요?
- 일반 텍스트는 AA 4.5:1, 큰 텍스트는 3:1입니다.
- AAA 수준이란 무엇인가요?
- 최대 접근성을 위해 권장되는 7:1 비율입니다.
- 여러 조합을 테스트할 수 있나요?
- 예, 색상을 변경하면 결과가 실시간으로 업데이트됩니다.
- HSL 형식이 지원되나요?
- 입력은 16진수 및 RGB 형식을 허용합니다.