대비 검사기는 무엇을 측정하나요?
대비 검사기는 전경색과 배경색의 상대적 휘도를 비교합니다. 결과는 1:1(색상이 시각적으로 동일할 때)에서 최대 대비인 검정과 흰색의 21:1까지 비율로 표시됩니다.
이 도구는 일반 텍스트와 큰 텍스트에 대해 WCAG 스타일의 통과/실패 지표를 보고합니다. 초기 디자인 결정, 컴포넌트 상태, 테마 토큰 및 보다 완전한 접근성 검토 전의 빠른 점검에 유용합니다.
결과 읽는 방법
| Check | 최소 비율 | Meaning |
|---|---|---|
| AA 일반 텍스트 | 4.5:1 | 일반 본문 텍스트에 대한 일반적인 목표입니다. |
| AA 대형 텍스트 | 3:1 | 문자 형상이 읽기 쉬운 더 크거나 굵은 텍스트에 적용됩니다. |
| AAA 일반 텍스트 | 7:1 | 높은 접근성 맥락에서 일반 텍스트에 대한 더 엄격한 목표입니다. |
| AAA 대형 텍스트 | 4.5:1 | 대형 텍스트에 대한 더 엄격한 목표입니다. |
이 도구가 입증하지 못하는 것
비율은 강력한 신호지만 완전한 접근성 감사는 아닙니다. 실제 가독성은 타이포그래피, 글자 굵기, 호버/포커스 상태, 비활성 상태, 주변 색상, 화면 품질, 텍스트가 이미지나 그라디언트 위에 표시되는지 여부 등에 따라 달라집니다.
- 투명도와 그라디언트는 별도의 검토가 필요합니다.
- 작은 아이콘과 얇은 획은 인접한 텍스트보다 더 강한 대비가 필요할 수 있습니다.
- 브랜드 색상은 한 쌍에서는 통과하고 다른 쌍에서는 실패할 수 있습니다.
- QR 스캔 대비와 텍스트 가독성 대비는 관련이 있지만 동일한 검사는 아닙니다.
약한 대비를 개선하는 방법
전경을 어둡게 하기
밝은 배경의 경우 텍스트 색상을 더 어두운 중성색이나 더 강한 브랜드 색상에 가깝게 조정하세요.
배경을 밝게 하기
작은 배경 조정으로 전경 토큰을 변경하지 않고도 브랜드 색상을 통과시킬 수 있습니다.
텍스트 크기 또는 굵기 늘리기
더 크거나 굵은 텍스트는 AA 기준이 낮지만 여전히 충분한 시각적 구분이 필요합니다.
각 상태를 점검하기
호버, 포커스, 비활성, 선택 및 오류 상태는 종종 서로 다른 색상 쌍을 사용합니다.
자주 묻는 질문
이 도구가 WCAG 전체 준수 감사를 수행하나요?
아니요. 이 도구는 색상 쌍에 대한 WCAG 스타일의 대비 임계값을 계산합니다. 전체 검토는 레이아웃, 키보드 동작, 의미론, 포커스 상태, 텍스트 대체 및 실제 렌더링된 타이포그래피도 확인합니다.
대형 텍스트로 간주되는 기준은 무엇인가요?
WCAG 지침은 대형 텍스트를 대략 18pt 보통 텍스트 또는 14pt 굵은 텍스트 이상으로 봅니다. 웹 작업에서는 디자인 레이블뿐만 아니라 실제 렌더링된 크기와 굵기를 확인하세요.
투명한 색상을 사용해도 되나요?
이 간단한 검사기는 불투명한 sRGB 색상을 사용합니다. UI에서 투명도를 사용하는 경우 최종 렌더된 전경과 배경을 먼저 혼합한 다음 그 결과 쌍을 검사하세요.
AA를 통과하면 디자인이 항상 읽기 쉬운가요?
항상 그런 것은 아닙니다. 매우 얇은 글꼴, 작은 UI 레이블, 복잡한 배경 및 저품질 디스플레이는 텍스트를 여전히 읽기 어렵게 만들 수 있습니다. 비율을 하나의 중요한 신호로 고려하세요.
이것은 QR 코드 대비와 동일한 것인가요?
아니요. QR 코드 대비는 스캐너의 신뢰성에 영향을 미치며, 이 도구는 텍스트 가독성 임계값에 중점을 둡니다. 수학적 원리는 관련이 있지만 실제 결정은 다를 수 있습니다.