색

원칙

• 값 대신 역할을 쓰세요. 역할은 모든 테마에서 다시 해석되지만, 복사한 값은 다음 테마에서 깨집니다.
• 밝기부터 정하세요. 대비는 주로 OKLCH 밝기로 정해지므로, 색상과 채도는 그다음에 다듬고 대비를 다시 확인하세요.
• 글자는 4.5:1, 표시는 3:1을 지키세요. 글자는 4.5:1(WCAG 1.4.3), 컨트롤 경계와 포커스 표시와 상태 아이콘은 3:1(WCAG 1.4.11)이 필요합니다.
• 색만으로 전달하지 마세요. 상태는 아이콘 옆에 글자로 이름을 붙여야 색각 이상과 강제 색상에서도 읽힙니다(WCAG 1.4.1).
• 채도는 작은 면에 쓰세요. 넓은 면은 회색에 가깝게 두고, 가장 진한 색은 배지 같은 작은 표시에 씁니다.

색 역할

각 행은 역할을 라이트 테마, 다크 테마 순으로 보여 줍니다. 값과 출처는 디자인 토큰에 있습니다.

CSS에서는 var()로 역할을 읽으세요.

.resource-summary {
  color: var(--surf-ink-body);
  background: var(--surf-surface);
}
.resource-summary a {
  color: var(--surf-brand-ink);
  text-decoration: underline;
}

대비

글자는 4.5:1, 24px 이상(굵으면 18.67px)인 큰 글자는 3:1이 필요합니다. 컨트롤 경계, 포커스 표시, 선택 표시는 맞닿은 색과 3:1이 필요하며, 장식용 구분선과 비활성 컨트롤은 예외입니다.

각 면은 아래 면과 1.05:1 이상 차이를 두어, 어떤 면도 배경에 묻히지 않게 합니다.

표는 현재 테마의 계산된 색을 sRGB의 WCAG 2 상대 휘도로 측정합니다. 투명도, 그라디언트, 겹침은 건너뛰므로 경계에 걸린 값은 별도 도구로 다시 확인하세요.

0 / 72쌍이 기준을 충족합니다. 강제 색상과 지원되지 않는 색상은 제외됩니다.

WCAG 1.4.3 — 텍스트 대비 / WCAG 1.4.11 — 비텍스트 대비

상태와 선택

상태는 라벨과 아이콘으로 나타내고, 둥근 면의 한쪽만이 아니라 면 전체나 테두리 전체를 칠하세요. 성공은 브랜드와 다른 초록이고, 그래도 라벨로 이름을 밝힙니다.

선택한 글자는 불투명한 회색과 전용 글자색을 써서 어느 면에서도 읽힙니다. 이 문장을 선택해 보세요.

OKLCH 팔레트

OKLCH는 색을 밝기 L(0–1), 채도 C, 색상 H로 나타냅니다. L은 눈에 보이는 밝기를 따르고, 색상은 HSL과 달리 밝기가 바뀌어도 유지됩니다. 그래서 대비는 L로 고정하고 색상과 채도만 바꿉니다.

팔레트 랩

색상환에서 색상을 고르세요. 랩은 단계를 만들고, 범주 묶음을 색각 이상 기준으로 검사하고, 아무 조합의 대비든 측정합니다. 팔레트가 마음에 들면 CSS를 복사하세요. 사이트 테마는 바뀌지 않습니다.

관련 문서

• 시각 위계 — 면, 높이, 선, 점을 구조에서 세부 순서로 정합니다.
• 테마 — 페이지나 영역에 라이트나 다크를 적용하고, 직접 테마를 만듭니다.
• 인터랙션 상태 — 컨트롤이 호버, 누름, 포커스, 선택, 대기 상태를 보여 주는 방식을 정합니다.
• 디자인 토큰 — 테마별 토큰 값, 별칭, 소스를 나열합니다.