Color 대비 검사기란?
색상 대비 검사기는 전경(텍스트) 색상과 배경 색상 간의 휘도 차이를 측정하여 WCAG(웹 콘텐츠 접근성 지침) 2.1에 정의된 대로 대비 비율을 생성합니다. 이 비율은 저시력이나 색맹이 있는 사용자가 텍스트를 읽을 수 있는지 여부를 결정합니다. WCAG는 AA(최소)와 AAA(향상)라는 두 가지 적합성 수준을 정의합니다. 각 수준은 일반 크기 텍스트와 큰 텍스트에 대해 서로 다른 임계값을 갖습니다. 이 도구는 비율을 즉시 계산하고 색맹의 일반적인 형태에서 색상 쌍이 어떻게 나타나는지 시뮬레이션합니다.
Color 대비 검사기를 사용하는 방법
- 1전경(텍스트) 색상을 HEX 값(예: #1e293b)으로 입력하거나 색상 선택기를 사용하세요.
- 2배경색을 HEX 값(예: #ffffff)으로 입력하거나 색상 선택기를 사용하세요.
- 3배경에 대해 다양한 크기로 텍스트를 표시하는 실시간 미리보기를 확인하세요.
- 4아래에 표시된 명암비와 WCAG AA/AAA 통과 또는 실패 결과를 확인하세요.
- 5색상 교체 버튼을 사용하면 전경과 배경을 빠르게 반전할 수 있습니다.
- 6아래로 스크롤하여 백색맹, 녹색맹, 삼색맹에 대한 색맹 시뮬레이션을 확인하세요.
주요 활용 사례
웹 접근성 규정 준수
배포하기 전에 웹 사이트의 텍스트와 배경색 조합이 WCAG 2.1 AA 또는 AAA 요구 사항을 충족하는지 확인하세요.
설계 시스템 검증
디자인 시스템에서 모든 색상 토큰 쌍을 테스트하여 모든 조합이 액세스 가능하고 규정을 준수하는지 확인하세요.
Color 실명 테스트
백색맹, 녹색맹, 제3색맹이 있는 사용자가 색상 선택을 어떻게 인식하는지 미리 보고 그에 따라 조정하세요.
고객 및 이해관계자 보고서
접근성 감사, ADA 규정 준수 검토 또는 섹션 508 평가에 대한 명확한 통과/실패 증거를 생성합니다.
자주 묻는 질문
WCAG AA 규정을 준수하려면 어떤 명암비가 필요합니까?
WCAG AA에서는 보통 크기 텍스트의 경우 4.5:1, 큰 텍스트(18px+ 또는 14px+ 굵은 글씨)의 경우 3:1의 최소 명암비가 필요합니다. 이러한 임계값은 중간 정도의 시력 장애가 있는 대부분의 사용자에게 가독성을 보장합니다.
WCAG AA와 AAA의 차이점은 무엇입니까?
WCAG AAA는 일반 텍스트의 경우 7:1, 큰 텍스트의 경우 4.5:1를 요구하는 보다 엄격한 표준입니다. AA는 최소 허용 수준으로 간주되지만 AAA는 향상된 가독성을 제공하므로 트래픽이 많은 웹사이트나 정부 웹사이트의 본문 텍스트에 권장됩니다.
색맹 시뮬레이션은 어떻게 작동하나요?
이 도구는 백색맹(적색맹), 이중맹(녹색맹), 삼색맹(청맹)이 색상을 인식하는 방식을 대략적으로 설명하는 과학적으로 파생된 색상 변환 매트릭스를 적용합니다. 시뮬레이션된 각 쌍의 명암비를 다시 계산하므로 다양한 시력 조건에서 접근성을 확인할 수 있습니다.
HEX 대신 RGB 또는 HSL 값을 사용할 수 있나요?
현재 이 도구는 HEX 색상 코드(#rrggbb 형식)를 허용합니다. Color 변환기 및 선택기 도구를 사용하여 먼저 RGB 또는 HSL 값을 HEX로 변환한 후 여기에 결과를 붙여넣을 수 있습니다.