브랜드 컬러가 예뻐도 텍스트 대비가 부족하면 WCAG AA에서 떨어지고, 실 사용자는 콘텐츠를 읽지 못합니다. 색상 접근성 도구로 대비·색약 시나리오를 검사하고 수정하는 단계별 절차입니다.
WCAG AA 핵심 기준
| 요소 | 대비 비율 | 비고 |
|---|---|---|
| 본문 텍스트 | 4.5:1 | 18px 미만 |
| 큰 텍스트 | 3:1 | 18px+ 또는 14px bold |
| UI 컴포넌트 | 3:1 | 버튼·입력 테두리 |
수정 우선순위
- Primary 버튼 위 흰 글자 — 가장 자주 실패
- 플레이스홀더 — 4.5:1 미달 다수
- 링크 vs 본문 — 색만으로 구분 금지, 밑줄 추가
- 에러 메시지 — 빨강+회색 조합 재검사
브랜드 팔레트 단계에서 AA 후보색을 같이 뽑으면 나중에 재작업이 줄어듭니다.
팁: 통과 후 실기기 스크린샷 3장(햇빛·실내·다크모드)을 QA 체크리스트에 넣으세요. 도구 수치와 실제 체감은 다를 수 있습니다.
컴포넌트별 체크리스트
- Primary button / Secondary / Ghost
- Input border vs placeholder
- Toast success·error
- Chart legend vs background
디자인 시스템 Storybook 각 story마다 접근성 도구 스크린샷 1장을 PR에 첨부하면 회귀를 막습니다.
AAA는 언제?
금융·공공은 AAA(7:1)를 요구하기도 합니다. AA 통과 후 본문 18px 이상 구간만 AAA로 올리는 점진 전략이 현실적입니다.
QA handoff
디자인 QA ticket에 'WCAG AA pass screenshot' 첨부를 완료 조건으로 넣으세요. 개발자가 임의 hex로 바꿔도, PR reviewer가 screenshot diff를 요구할 수 있습니다.
legal·gov client는 accessibility statement 페이지를 요구합니다. AA pass report PDF를 annual renewal asset으로 저장해 두면, 재계약 RFP response time이 짧아집니다.
design token PR에 accessibility tool screenshot을 required attachment로 GitHub action comment bot이 remind하게 설정하세요.
focus ring visible 2px outline은 keyboard user에게 필수입니다. color contrast pass 후 focus state screenshot도 same ticket에 upload하세요.