Color Guide

Accessibility
용도 권장 단계 대비 기준 비고
텍스트 950~700 C ≥ 3.0:1
  • 본문, 캡션, 버튼 등 정보 전달용 기능성 텍스트에 사용
  • WCAG 기준 최소 명도 대비 C ≥ 3.0:1 확보
  • 일반 본문 텍스트는 C ≥ 4.5:1 이상 권장
  • 굵 거나 큰 텍스트는 C ≥ 3.0:1 이상 권장
CTA 버튼 600 C ≥ 3.0:1
  • 사용자의 행동 유도 목적 (예: 가입, 시작하기, 구매하기 등)
  • 텍스트 대비 + 배경 대비 모두 확보 필요
  • 배경색 기준 텍스트 대비 C ≥ 4.5:1 이상 권장
  • 색상은 600 단계 이상 사용 권장
아이콘 500 C ≥ 3.0:1
  • 기능성 아이콘(예: 복사, 다운로드 등)은 텍스트처럼 충분한 명도 대비 확보 필요
  • 500 단계 색상이 일반적으로 적합
  • 정보 전달을 위한 아이콘은 시각적으로 명확해야 함
구분선/테두리 400~300 장식적
  • 레이아웃 구분 또는 컨테이너 테두리용
  • 세밀한 시각적 구분 목적이므로 낮은 단계 색상 사용 가능
  • 정보 전달 기능이 없다면 접근성 대비 기준은 적용되지 않음
배경 200~50 장식적
  • 콘텐츠 강조 또는 정보 구역 구분용 배경
  • 너무 높은 대비보다는 편안한 톤 유지 권장
  • 텍스트나 버튼이 올라갈 경우 명도 대비 고려 필요
브랜드 표현 500 이하 C ≤ 4.5:1 (권장)
  • 기능성보다 감성·미적 목적의 디자인 요소에 사용
  • 예: 브랜드 컬러, 일러스트, 애니메이션 등
  • 기능적 대비 요건은 강제되지 않음
  • 텍스트와 겹칠 경우 접근성 대비 기준은 반드시 충족
  • 스타일과 기능을 분리하면 UX와 접근성을 모두 만족 가능
Utilizing Color Palettes

00~900 단계는 색상 팔레트를 정렬하기 위한 단순한 숫자가 아니라,
중간 단계 색조(550, 950 등)를 유연하게 추가할 수 있도록 설계된 확장형 구조입니다.
변화하는 디자인 요구에 따라 색상을 끊김 없이 보완할 수 있는 시스템적 접근입니다.

Design Systems Referenced