# [[Web Content Accessibility Guidelines (WCAG)]]

## 📌 Brief Summary
웹 콘텐츠 접근성 지침(WCAG)은 모든 사용자가 디지털 콘텐츠와 인터페이스에 장벽 없이 접근할 수 있도록 보장하는 포괄적인 접근성 표준입니다 [1, 2]. 실무 CSS 및 UI/UX 설계에서 WCAG는 애니메이션의 움직임 제한, 텍스트 크기 확대의 보장, 색상 대비 준수 등을 규정하여 포용적이고 안전한 사용자 경험(UX)을 구축하는 핵심 기준이 됩니다 [2-4].

## 📖 Core Content
- **모션 및 애니메이션 제어 (WCAG 2.2)**
  과도한 애니메이션과 모션은 전정기관 장애(vestibular disorders)를 가진 사용자에게 불편함이나 발작을 유발할 수 있습니다 [4, 5]. 따라서 WCAG 2.2 지침은 모션을 미묘(subtle)하게 유지하고, 사용자가 애니메이션을 비활성화할 수 있는 설정(예: prefers-reduced-motion)을 제공할 것을 권장하며 이를 통해 포용적인 애니메이션 전략을 세울 수 있습니다 [1, 4, 5].
- **반응형 유체 타이포그래피 (WCAG 1.4.4)**
  WCAG 1.4.4 항목은 사용자가 보조 기술 없이도 텍스트를 최대 200%까지 확대할 수 있어야 한다고 규정합니다 [2]. 단순히 뷰포트 단위(vw 등)만 사용하여 폰트 크기를 제어하면 사용자의 브라우저 확대/축소 기능이 무력화되어 접근성 지침을 위반하게 됩니다 [2]. 이를 준수하기 위한 업계 모범 사례로 `clamp()` 함수 등을 활용해 최대 폰트 크기가 최소 폰트 크기의 2.5배를 초과하지 않도록 설정하는 "2.5배 규칙(2.5x Rule)"이 사용됩니다 [6, 7]. 
- **디자인 토큰과 색상 대비**
  디자인 시스템을 구축하고 디자인 토큰을 테스트할 때, 특히 색상 토큰(Color Tokens)은 명도 대비 비율(contrast ratio)이 WCAG 규정을 준수하는지 반드시 검증(Accessibility testing)을 거쳐야 합니다 [3, 8].

## 🔗 Knowledge Connections
- **Related Topics:** [[반응형 디자인]], [[애니메이션 (transition / keyframes)]], [[유체 타이포그래피 (Fluid Typography)]], [[디자인 시스템 개념]]
- **Projects/Contexts:** [[디자인 토큰(Design Tokens) 구축 및 테스트]], [[프론트엔드 실무 접근성 최적화]]
- **Contradictions/Notes:** 소스 내에서 상충되는 정보는 없습니다. 다만, 반응형 유체 타이포그래피를 구현할 때 단순히 뷰포트 크기에만 의존하면 텍스트 확대 기능이 작동하지 않아 WCAG 1.4.4 지침을 위반하는 위험성이 발생하므로 설계 시 각별한 주의가 필요하다는 점이 강조됩니다 [2, 9].

---
*Last updated: 2026-04-26*