Skip to Content
디자인 시스템접근성

접근성 (색상 대비)

@choblue/ui는 WCAG 2.1 AA 기준을 준수합니다. 색상 토큰을 사용할 때 아래 규칙을 따르면 접근성을 자동으로 확보할 수 있습니다.

WCAG AA 대비 기준

요소최소 대비비
일반 텍스트 (16px 미만)4.5:1
큰 텍스트 (18px 이상 또는 14px bold)3:1
아이콘, UI 요소3:1

팔레트별 안전 단계

흰색 배경(bg-background) 기준으로, 텍스트에 안전하게 사용할 수 있는 최소 단계입니다.

팔레트텍스트용 최소 단계대비비배경용
Primary5005.41:1100~200 안전
Success6006.24:1100~200 안전
Info7004.60:1100~200 안전
Warning7004.32:1 (큰 텍스트만)100~200 안전
Danger6008.14:1100~200 안전

주의사항

  • 500 단계를 텍스트에 쓸 수 있는 팔레트는 Primary와 Danger뿐입니다. 나머지는 600~700을 사용하세요.
  • Warning 700은 큰 텍스트 기준(3:1)만 충족합니다. 본문 텍스트에는 사용을 피하세요.
  • 아이콘은 큰 텍스트 기준(3:1)을 적용할 수 있습니다.

안전한 조합 패턴

상태 뱃지/태그

{/* 안전한 조합: 연한 배경 + 진한 텍스트 */}
<Badge className="bg-primary-100 text-primary-500">기본</Badge>
<Badge className="bg-success-100 text-success-600">성공</Badge>
<Badge className="bg-info-100 text-info-700">정보</Badge>
<Badge className="bg-warning-100 text-warning-700">경고</Badge>
<Badge className="bg-danger-100 text-danger-600">위험</Badge>

피해야 할 조합

{/* 대비 부족 — 사용 금지 */}
<span className="text-success-500">...</span>  {/* 3.2:1 — AA 미달 */}
<span className="text-info-500">...</span>     {/* 2.8:1 — AA 미달 */}
<span className="text-warning-500">...</span>  {/* 2.1:1 — AA 미달 */}

체크리스트

새 컴포넌트에 색상을 적용할 때 확인하세요:

  • 텍스트 색상이 위 안전 단계 이상인가?
  • 상태 뱃지는 bg-{status}-100 text-{status}-{안전단계} 패턴을 따르는가?
  • 비활성 상태에서도 텍스트가 읽히는가? (disabled-foreground 토큰 사용)
  • 다크 모드에서 대비가 유지되는가? (시맨틱 토큰이면 자동 처리)
Last updated on
토큰 체계Icons