Wear OS のマテリアル デザインは、暗めのカラーパレットを使用します。特に、アプリとタイルの背景は黒色にする必要があります。
カラーパターン
Wear OS のカラーパターンは、ベースラインのマテリアル デザインのカラーテーマに基づいて作成されています。このテーマはそのまま使用することも、アプリに合わせてカスタマイズすることもできます。
このテーマには、次のデフォルト色が含まれています。
- プライマリ カラーとセカンダリ カラー
- プライマリ カラーとセカンダリ カラーのバリエーション
- 他の UI の色（バックグラウンド、サーフェス、エラー、タイポグラフィ、アイコンなどの色）
ダークモード
ダークモードの色はすべて、WCAG の AA 基準を満たす十分なコントラスト（すべてのエレベーションのサーフェスに適用した場合、本文に対して 4.5:1 以上）で要素を表示する必要があります。
ユーザー補助のために彩度の低い色を使用する
ダークモードでは、彩度の高い色は使用しないでください。本文と暗いサーフェスのコントラストが、4.5:1 以上という WCAG のユーザー補助基準を満たしません。また、暗いバックグラウンドに対して彩度の高い色を使用すると、ちらつきが生じて眼精疲労を引き起こすことがあります。代わりに、読みやすくするために彩度の低い色を使用してください。
図 1. カラーパレットの色の彩度が低くなると、読みやすくなります。
図 2. 暗いバックグラウンドでは彩度の高い色を使用しないでください。
プライマリ カラー
プライマリ カラーは、アプリの画面やコンポーネントで最も多く表示される色です。ベースラインのマテリアル デザイン ダークテーマは、プライマリ カラーとして色調 200 を使用しています。これは WCAG の AA 基準を満たしています（すべてのエレベーションのサーフェスで標準テキストに対して 4.5:1 以上）。
図 3. ダークモードのプライマリ パレットの例。 1. プライマリ カラー インジケーター。2. 色調のバリエーション。
セカンダリ カラー
セカンダリ カラーは、UI の特定の部分にアクセントを付けるために使用できます。ダークモードでは、4.5:1 のコントラスト レベルを満たすようにセカンダリ カラーの彩度を下げることができます。
図 4 で、1）はセカンダリ カラー インジケーター、2）は色調のバリエーションを示しています。
図 4. ダークモードのセカンダリ パレットの例。
アクセント カラー
ダークモードでは、暗いサーフェスが UI の大部分を占めます。アクセント カラーには通常、淡い色（彩度の低いパステルカラー）または鮮やかな色（彩度の高いビビッドカラー）を使用します。そうすることで、アクセントを付けた要素を目立たせることができます。アクセント カラーは、テキストやボタンなどの重要な要素にアクセントを付けるために、控えめに使用します。
アクセント カラーを見つける: カラーパレット ジェネレータを使用して、カラーテーマを作成または表示します。カラーパレット ジェネレータは色調パレット（プライマリ カラーとセカンダリ カラーから作成した、明るい色から暗い色までのバリエーション）も作成します。ダークモード用にバリエーションを選択します。
図 5 で、1）はデフォルト テーマのプライマリ カラー インジケーター、2）はダークモードのプライマリ カラー インジケーターを示しています。
図 5. ダークモードでの柔軟性とユーザビリティを高めるために、彩度の高い色調（900～500）ではなく、淡い色調（200～50）を使用することをおすすめします。
UI の大部分（背景色など）には暗めの色を使用します。明るめの色は、アクセントや UI 要素用に残しておきます。