색상

Wear OS용 Material Design은 어두운 색상 팔레트를 사용합니다. 특히 개발자는 앱과 카드에 검은색 배경을 사용해야 합니다.

색 구성표

Wear OS 색 구성표는 기준 Material Design 색상 테마를 기반으로 만들어집니다. 이 테마를 그대로 사용하거나 앱에 맞게 맞춤설정할 수 있습니다.

이 테마에는 다음에 관한 기본 색상이 포함됩니다.

• 기본 색상과 보조 색상
• 기본 색상과 보조 색상의 변형
• 추가 UI 색상(예: 배경, 노출 영역, 오류, 서체, 아이콘의 색상)

어두운 테마

모든 어두운 테마 색상은 모든 고도 노출 영역에 적용될 때 본문 텍스트의 경우 최소 4.5:1이라는 WCAG의 AA 표준을 충족하는 충분한 대비로 요소를 표시해야 합니다.

접근성을 위해 채도가 낮은 색상 사용

어두운 테마는 채도가 높은 색상을 사용하지 않아야 합니다. 어두운 노출 영역 대비 본문 텍스트의 경우 최소 4.5:1이라는 WCAG의 접근성 표준을 충족하지 않기 때문입니다. 또한 채도가 높은 색상은 어두운 배경에 대해 광학 진동이 발생하여 눈의 피로를 유발할 수 있습니다. 대신 채도가 낮은 색상을 더 읽기 쉬운 대안으로 사용하세요.

그림 1. 색상 팔레트의 채도가 낮은 색상은 가독성을 높입니다.

그림 2. 어두운 배경에서는 채도가 높은 색상을 사용하지 마세요.

기본 색상

기본 색상은 앱의 화면과 구성요소에서 가장 자주 표시되는 색상입니다. 기준 Material Design 어두운 테마는 200가지 색을 기본 색상으로 사용합니다. 모든 고도 노출 영역에서 일반 텍스트의 경우 최소 4.5:1이라는 WCAG의 AA 표준을 충족합니다.

그림 3. 어두운 테마의 기본 팔레트 샘플. 1. 기본 색상 표시기 2. 색조 변형

보조 색상

보조 색상은 UI의 특정 부분을 강조하는 데 사용할 수 있습니다. 어두운 테마에서 4.5:1 대비 수준을 충족하도록 보조 색상의 채도를 낮출 수 있습니다.

그림 4에서 1은 보조 색상 표시기를 나타내고 2는 색조 변형을 나타냅니다.

그림 4. 어두운 테마의 보조 팔레트 샘플

강조 색상

어두운 테마에서는 어두운 노출 영역이 UI의 대부분을 차지합니다. 강조 색상은 일반적으로 연한 색(채도가 낮은 파스텔 색)이거나 밝은 색(채도가 높은 선명한 색)입니다. 이를 통해 강조된 요소가 눈에 띌 수 있습니다. 강조 색상은 텍스트나 버튼과 같은 핵심 요소를 강조하기 위해 드물게 사용하세요.

강조 색상 찾기. 색상 팔레트 생성기를 사용하여 색상 테마를 만들거나 확인합니다. 색상 팔레트 생성기는 기본 색상과 보조 색상에서 생성된 밝은 색상에서 어두운 색상으로의 변형 범위인 색조 팔레트도 만듭니다. 어두운 테마에 사용할 이러한 변형을 선택하세요.

그림 5에서 1은 기본 테마 기본 색상 표시기를 나타내고 2는 어두운 테마 기본 색상 표시기를 나타냅니다.

그림 5. 어두운 테마에서 유연성과 사용성을 높이려면 채도가 높은 색조(900~500) 대신 밝은 색조(200~50)를 사용하는 것이 좋습니다.

배경 색상과 같이 UI의 큰 부분에 더 어두운 색상 스펙트럼을 사용합니다. 강조와 UI 요소를 위해 밝은 색상을 예약합니다.