[Design] StatusLabel·기한 색상 토큰 대비(contrast) AA 미달 검토

[BcKmini]

배경

접근성 점검(#92) 중 WCAG 2.1 AA 기준(일반 텍스트 4.5:1)으로 색상 대비를 계산한 결과, StatusLabel과 기한 3단계 색상에 쓰이는 톤 색상 3개가 흰 배경 위 텍스트로 쓰일 때 기준에 못 미친다.

측정 결과 (흰 배경 #ffffff 대비)

토큰	값	대비	판정
--fowoco-amber-600	#d79222	2.62:1	❌ AA 미달 (많이 부족)
--fowoco-red-600	#d84a4a	4.20:1	❌ AA 미달 (근소)
--fowoco-green-600	#2c8a5b	4.29:1	❌ AA 미달 (근소)
--fowoco-violet-600	#7657c8	5.29:1	✅ 통과
--brand-primary	#07847f	4.55:1	✅ 통과 (근소)

영향받는 위치: StatusLabel.module.css(warning/success/critical 톤), WorkerListPage.module.css(.workerDeadlineUrgent/.workerDeadlineMedium/.workerDeadlineComfortable), WorkListPage.module.css·WorkItemRow.module.css의 관련 텍스트/링크 색상.

왜 이번 PR에서 바로 안 고쳤는지

이 세 토큰은 앱 전역(뱃지, 링크, 상태 텍스트)에서 재사용되는 브랜드 색상이라, 값을 바꾸면 여러 화면의 시각적 톤이 함께 바뀐다. 색상 자체를 조정하는 건 디자인 결정이 필요해 별도 이슈로 분리했다.

참고용 대안 값 (재계산 필요, 확정 아님)

• amber #d79222 → #9f6c19 근처 (4.53:1) — 다만 원래 톤과 꽤 달라져 보일 수 있어 재검토 필요
• red #d84a4a → #cf4747 근처 (4.52:1)
• green #2c8a5b → #2a8457 근처 (4.63:1)

완료 조건

• 디자이너 확인 후 3개 토큰의 최종 색상값 결정 (배경 대비 텍스트로 쓰이는 경우와 -50 틴트 배경 위에 쓰이는 경우 모두 고려)
• tokens.css 갱신, 영향받는 화면 시각 확인
• 필요 시 굵기/크기 조정으로 "large text" 완화 기준(3:1) 활용 검토