Color Usage

UX 모범사례 (색 관습)

빨강·노랑·초록 같은 '신호등 색'은 정보 화면에서 의미가 정해져 있습니다. 보기 좋다고 일반 버튼이나 배경에 이 색을 쓰면, 사용자는 '뭔가 잘못됐나?' 하고 멈칫합니다. 상태색은 상태를 알릴 때만 쓰는 것을 권합니다.

디자인 가이드라인 (시각 디자인 통용)

정보 화면은 색이 적을수록 읽기 편합니다. 60-30-10은 그래픽·시각 디자인에서 두루 쓰이는 색 배분 가이드라인입니다(국제 표준은 아님) — 화면의 60%는 중립(배경), 30%는 보조 색, 10%만 강조(브랜드) 색. 색이 4~5개로 늘면 시선이 분산됩니다. 강조하고 싶을수록 색은 오히려 줄이는 편이 효과적입니다.

WCAG 2.1 · 1.4.1 / 1.4.3 (AA)

'빨간 글씨 = 필수'처럼 색에만 의존하면, 색약 사용자(남성 약 8%)는 구분하기 어렵습니다. 색은 보조 신호로 두고, 아이콘·라벨·문구를 함께 써야 합니다. 텍스트와 배경의 대비는 최소 4.5:1을 맞춥니다. 이 두 가지는 권고가 아니라 WCAG 2.1 의 명문 규정입니다(1.4.1 색의 사용, 1.4.3 대비). 아래 두 입력칸을 비교해 보세요.

색약 비중과 접근성

색을 고를 때 '색을 다르게 보는 사람'의 비율을 무시할 수 없습니다. 그래서 Groudit 은 브랜드 주색으로 파랑을 씁니다 — 파랑은 색약 사용자에게도 비교적 잘 구분되기 때문입니다.

유형별로 파랑은 어떤가

적록 대비 vs 파랑

빨강↔초록만으로 상태를 나누면 적록색약 사용자에게는 거의 같은 색으로 보입니다. 파랑은 명도 차이가 커서 더 안전합니다. (아래는 이해를 돕기 위한 예시입니다.)

UX 모범사례

정돈된 화면일수록 회색 계열이 대부분입니다. 텍스트·테두리·배경·구분선 — 거의 모든 구조는 중립색으로 충분합니다. 색은 정말 강조할 한 곳을 위해 아껴 둡니다. 중립을 잘 쓰는 것이 곧 색을 잘 쓰는 것입니다.

권장·구조는 중립 단계(배경/카드/테두리)로 쌓고, 색은 행동을 유도할 곳에만 씁니다.