Design Token 단계의 18종 WCAG 검증으로 a11y 회귀 방지

Context

UI 구현 후 Lighthouse 등 런타임 도구로 접근성을 검사하는 사후 처리 방식 채택. 이로 인해 컴포넌트 스타일 수정 및 재작업에 따른 개발 리소스 낭비 발생.

Technical Solution

• Token Generation 시점에 18가지 WCAG 2.1 Contrast Ratio 검증 로직을 통합하여 Shift-Left 구현
• OKLCH 색 공간 기반의 자동 보정 알고리즘을 적용하여 Hue와 Chroma를 유지한 채 Lightness만 조정함으로써 AA 표준 강제 충족
• Theme 생성 결과물을 JavaScript 객체 형태로 제공하여 CI/CD 파이프라인 내에서 Assertion 기반의 자동 통과/실패 판정 수행
• Light/Dark 모드별 독립적 접근성 검증 체계를 구축하여 모드 전환 시 발생 가능한 대비 이슈 원천 차단
• 표준 토큰 외 조합을 위한 단독 contrastRatio 유틸리티를 제공하여 정적 분석 범위 확장