<aside> 📎

참고 출처

1. Contrast and Color Accessibility — WebAIM — 이 레슨에서 다루는 명도 대비 기준(WCAG AA 4.5:1, 큰 텍스트·UI 요소 3:1)의 권위 있는 근거입니다.
2. The 60-30-10 Rule: A Guide to UI Color Balance — 화면 색 비율을 설계하는 60-30-10 규칙의 설명 자료입니다. </aside>

타입으로 위계를 만드는 법을 익혔다면, 이제 색을 다룰 차례입니다. 색은 브랜드의 첫인상을 만들고, 성공·경고·오류 같은 의미를 빠르게 전달하며, 어떤 요소가 중요한지를 보여 줍니다. 동시에 잘못 쓰면 글자가 읽히지 않거나 일부 사용자가 정보를 전혀 인지하지 못하게 됩니다. 이번 레슨에서는 색을 시스템과 접근성 관점에서 설계하는 법을 익힙니다.

컬러 시스템과 접근성

• 컬러 시스템은 화면에서 색을 임의로 고르지 않고 역할에 따라 정해 두고 재사용하는 체계입니다.
• 색은 미감뿐 아니라 의미 전달과 접근성에 직접 영향을 주므로 시스템으로 관리해야 합니다.a

컬러의 역할

• UI 색은 보통 다음 역할로 나눕니다.
  • 프라이머리 컬러(Primary): 브랜드를 대표하고 핵심 행동 버튼 등에 쓰는 색입니다.
  • 세컨더리 컬러(Secondary): 주조색을 보완하는 색입니다.
  • 강조 컬러(Accent): 특정 요소를 두드러지게 할 때 쓰는 색입니다.
  • 시맨틱 컬러(Semantic): 성공(초록), 경고(노랑), 오류(빨강), 정보(파랑)처럼 의미가 정해진 색입니다.
  • 뉴트럴 컬러(Neutral / Surface): 배경, 테두리, 본문 텍스트에 쓰는 회색 계열입니다.

60-30-10 규칙과 컬러 스케일

• 60-30-10 규칙은 화면 색 비율의 출발점입니다. 지배색 60%, 보조색 30%, 강조색 10%로 배분하면 균형 잡힌 화면이 됩니다.
  • 대개 배경·여백 같은 중립색이 60%, 보조 영역이 30%, 핵심 버튼 등 강조가 10%를 차지합니다.
• 색 하나마다 밝기 단계(예: 50부터 900까지) 를 만들어 두면, 같은 색 계열 안에서 배경·텍스트·테두리를 일관되게 골라 쓸 수 있습니다. 이것이 디자인 시스템의 컬러 토큰으로 이어집니다.

접근성: 명도 대비

• 색을 쓸 때 반드시 지켜야 하는 기준이 명도 대비(contrast ratio) 입니다. 글자와 배경의 밝기 차이를 1:1부터 21:1까지의 비율로 나타냅니다.
  • 본문 텍스트: 최소 4.5:1 (WCAG AA 기준)
  • 큰 텍스트(약 18pt 이상 또는 14pt 굵게)와 아이콘·UI 요소: 최소 3:1
• 흔히 쓰는 회색 #777777은 흰 배경에서 약 4.47:1로, 4.5:1에 미세하게 못 미쳐 본문 기준을 통과하지 못합니다. "거의 4.5"는 통과가 아니라는 점이 중요합니다.
• 색에만 의존해 의미를 전달하면 안 됩니다. 예를 들어 오류를 빨간색으로만 표시하면 색각 이상 사용자는 인지하지 못하므로, 아이콘이나 텍스트를 함께 사용합니다.