색상 대비 검사기
WCAG 2.1 접근성 기준에 따라 전경색과 배경색의 대비율을 검사합니다. AA/AAA 결과를 즉시 확인하세요.
전경색 (텍스트)
배경색
대형 텍스트 미리보기 (18pt 굵게)
일반 텍스트 미리보기 — 빠른 갈색 여우가 게으른 개 위를 뛰어넘습니다.
14.05:1명암비
AA — 일반 텍스트 (≥ 4.5:1)통과
AA — 대형 텍스트 (≥ 3:1)통과
AAA — 일반 텍스트 (≥ 7:1)통과
AAA — 대형 텍스트 (≥ 4.5:1)통과
이 도구 소개
색상 명암비 검사기는 WCAG 2.1 상대 휘도 공식을 사용하여 전경색(텍스트)과 배경색 사이의 명암비를 계산합니다.
WCAG 2.1은 두 가지 준수 수준을 정의합니다: AA는 일반 텍스트에 4.5:1, 대형 텍스트에 3:1을 요구합니다. AAA는 일반 텍스트에 7:1, 대형 텍스트에 4.5:1을 요구합니다.
사용 방법
- 색상 선택기를 사용하거나 16진수 코드를 입력하여 전경색과 배경색을 선택하세요.
- 미리보기에서 일반 및 대형 크기의 텍스트가 어떻게 보이는지 확인하세요.
- 명암비와 WCAG 통과/실패 결과가 즉시 업데이트됩니다.
- 샘플 쌍을 사용하여 일반적인 접근성 패턴을 탐색하세요.
활용 사례
UI 디자이너는 버튼 라벨과 본문 텍스트가 WCAG 표준을 충족하는지 확인합니다. 프론트엔드 개발자는 디자인 시스템에서 텍스트와 배경 조합을 확인합니다.
자주 묻는 질문
- "대형 텍스트"란? — WCAG는 대형 텍스트를 최소 18pt(24px) 일반, 또는 14pt(약 18.67px) 굵게로 정의합니다.
- 투명도나 rgba는 지원하나요? — 아니요, 이 도구는 단색 16진수 색상만 지원합니다. 알파 합성 색상은 먼저 배경에 평탄화하세요.
- 어떤 WCAG 수준을 목표로 해야 하나요? — AA는 대부분의 공개 웹사이트에 권장되는 최소값입니다. AAA는 더 나은 가독성을 제공합니다.
- 4.5:1이 항상 충분한가요? — 4.5:1은 WCAG AA를 충족하지만, 시각 장애가 더 심한 사용자에게는 더 높은 비율이 도움이 될 수 있습니다.