모든 전경색과 배경색 간의 WCAG 2.1 대비율을 확인하고 샘플 텍스트를 미리 보고 AA/AAA 합격 결과를 즉시 확인하세요.
Features
- 라이브 색상 선택: Ant Design 선택기로 전경색과 배경색을 조정하거나 정확한 HEX 값을 입력하세요.
- WCAG 매트릭스: 일반 텍스트, 큰 텍스트 및 UI 그래픽에 대한 AA/AAA 요구 사항을 단일 테이블에서 확인하세요.
- 정확한 휘도: 대비율은 선형화된 RGB 채널을 사용하는 WCAG 2.1을 따르며 색상별 휘도 판독값이 포함됩니다.
- 미리보기 블록: 선택한 팔레트로 라이브 샘플 카드 내에서 제목과 단락을 테스트하세요.
Usage Guide
- 색상 선택: 전경색과 배경색의 HEX 값을 선택하거나 붙여넣으세요.
- 비율 검토: 계산된 대비율과 AA/AAA 표를 확인하여 합격/불합격 정보를 확인하세요.
- 복사 조정: 샘플 텍스트를 편집하여 실제 레이블, 버튼 또는 마케팅 카피를 미리 보세요.
Technical Details
상대 휘도
각 RGB 채널은 계수 0.2126, 0.7152 및 0.0722로 휘도를 계산하기 전에 WCAG 감마 곡선을 사용하여 선형 값으로 변환됩니다.
대비율
비율 공식 (L1 + 0.05) / (L2 + 0.05)는 밝은 색상과 어두운 색상을 비교하여 모든 장치에서 일관된 가독성을 보장합니다.
임계값
AA 일반 텍스트는 ≥ 4.5:1, 큰 텍스트는 ≥ 3:1, AAA 일반은 7:1, AAA 큰 텍스트는 4.5:1이 필요하며 그래픽 객체는 3:1을 충족해야 합니다.
Frequently Asked Questions
- 큰 텍스트는 다른 임계값을 사용합니까?
- 예. ≥ 18px 일반 또는 14px 굵게의 텍스트는 큰 텍스트로 인정되며 AA의 경우 3:1, AAA의 경우 4.5:1만 필요합니다.
- 그라데이션을 테스트하는 방법은 무엇입니까?
- 그라데이션에서 가장 밝은 정지점과 가장 어두운 정지점을 확인하세요. 각 정지점 쌍은 원하는 비율을 충족해야 합니다.
- 아이콘이 텍스트로 간주됩니까?
- 단색 아이콘 및 필수 UI 그래픽은 배경에 대해 최소 3:1 대비를 충족해야 합니다.
Related Documentation
- WCAG 2.1 대비 (성공 기준 1.4.3) - 텍스트 및 텍스트 이미지의 최소 대비 수준에 대한 공식 지침.
- WCAG 2.1 대비 (1.4.6) - AAA 준수를 위한 향상된 대비 요구 사항.
- MDN - 휘도 계산 - 접근성 도구에서 사용되는 선형 RGB 공식에 대한 배경.
- W3C - 대비율 수학 - 비율 공식, 반올림 및 근거에 대한 세부 정보.
- 포용적 디자인 카드 - 다양한 청중을 위한 색상 및 타이포그래피 페어링 팁.