---
{"id":"color","title":"색상·상태·대비","category":"기초","order":11,"summary":"색상은 장식보다 의미가 먼저이며, 실제 전경·배경 조합을 검증합니다.","status":"문서 기준 · UI 미검증","references":["elements/color/usage","guidelines/accessibility/color","patterns/status-indicator-pattern/index"]}
---

# 색상·상태·대비

## 원칙

색상 역할은 배경·표면·본문·보조본문·경계·작업·선택·상태로 나눕니다. 현재 값은 [토큰](tokens.md)을 따릅니다. 이 문서는 새로운 팔레트를 지정하지 않습니다.

- COL-01 MUST: 오류·정상·선택 여부를 색상만으로 전달하지 않습니다. 텍스트, 아이콘 또는 형태를 병행합니다.
- COL-02 MUST: 일반 텍스트 대비는 4.5:1, 큰 텍스트는 3:1을 기준으로 검사합니다. 큰 텍스트는 18pt 이상 또는 굵은 14pt 이상입니다.
- COL-03 MUST: 식별에 필요한 UI 경계·상태·의미 그래픽은 인접 색과 3:1을 확인합니다. 모든 장식 선에 일괄 적용하는 규칙은 아닙니다.
- COL-04 MUST: 활성 컨트롤을 흐린 회색으로 처리해 비활성처럼 보이게 하지 않습니다.
- COL-05 SHOULD: 중성 기본 표면을 유지하고 강조색은 실제 중요도에 비례해서 사용합니다.
- COL-06 MUST: 상태명이 아닌 상태값을 사용자의 언어로 제공합니다. 녹색 점만 있는 서버 상태는 충분하지 않습니다.

## 우리 제품에서 특히 주의

VPS/Panel의 라임을 작은 흰 배경 링크에 그대로 사용하지 않습니다. Blesta는 작은 링크 전용 --vx-link가 있습니다. Blesta 토큰 안의 레거시 success가 오렌지라는 이유만으로 삭제하거나 녹색으로 바꾸지 않습니다. 실제 소비처·아이콘·문구를 점검할 [보완 항목](gaps.md)입니다.

## 예시

좋음: “연결 끊김 · 마지막 확인 14:32 KST”와 상태 아이콘을 함께 표시.

피함: 초록·빨강 점만 표시하거나 모든 숫자를 브랜드 라임으로 표시.

## 검증

라이트/다크, hover/focus/disabled, 선택된 행, 오류 필드, 그래프·배지의 실제 조합을 측정합니다. 색상 토큰 표가 있다는 것만으로 WCAG 준수를 인증하지 않습니다.

외부 기준: [WCAG 대비](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html), [비텍스트 대비](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html).