Accessibility (접근성)
📋 상세 점검 항목: HTML+ARIA 표준 · WCAG 2.1/2.2 체크리스트 · KWCAG 2.2 체크리스트
iCignal의 접근성 가이드는 Foundation과 완전히 동일하며, WCAG 2.1 AA 기준을 준수합니다.
Foundation 상속
iCignal은 Foundation의 접근성 원칙을 모두 상속합니다.
iCignal 색상 대비
iCignal 브랜드 컬러의 색상 대비를 확인하세요:
| 배경 | 텍스트 | 대비율 | WCAG |
|---|---|---|---|
| white (#ffffff) | Primary 500 (#2196f3) | 4.6:1 | ✅ AA |
| white (#ffffff) | Secondary 500 (#4caf50) | 3.6:1 | ✅ AA (큰 텍스트) |
| white (#ffffff) | Accent 500 (#ff9800) | 2.8:1 | ⚠️ 아이콘만 |
| white (#ffffff) | text-primary (#212121) | 16.1:1 | ✅ AAA |
권장 조합
// ✅ Good: Primary 500 + white (4.6:1)
<button className="bg-primary-500 text-white px-md py-sm rounded">
Accessible iCignal Button
</button>
// ⚠️ Caution: Accent는 큰 텍스트/아이콘만
<div className="bg-accent-500 text-white text-2xl font-bold p-md rounded">
Large Text Only
</div>
// ✅ Best: Secondary 700 for higher contrast
<button className="bg-secondary-700 text-white px-md py-sm rounded">
High Contrast Green
</button>다음 단계
Last updated on