Material Design 3 要点まとめ #7 Color - Color system

2022年11月9日 15:26

Material Design 3 ガイドラインの要点をまとめたものです。
第6・7・8回はColorの章。長いので記事を3つに分けます。今回はColor systemの項について。
M3のカラーシステムは動的な変化に対応するもので、配色を一定値の固定グループではなく「相対的な色調のまとまり」と考えるところがポイントです。

Key colors & tones

要点

・カラースキーム：5つのキーカラー × 13のトーン + α
・キーカラー：3つのアクセントカラーと2つのニュートラルカラー
・トーンパレット：白と黒を含む13のトーン

カラースキーム：5つのキーカラー × 13のトーン + α

5つのキーカラーは「プライマリ／セカンダリ／ターシャリ／ニュートラル／ニュートラルバリアント」。
この5つに加えて任意のカスタムカラーをキーカラーとして追加することもできる（詳細は後述）。
また、この5つ以外にエラー用のカラーは別で用意される。
キーカラーそれぞれに対して13段階の濃淡のトーンが生成される。

「ターシャリ」若干聞き慣れないですが Tertiary で「第3の」という意味です。エラーカラーがキーカラーと別扱いなのは汎用性の差でしょう。

キーカラー：3つのアクセントカラーと2つのニュートラルカラー

プライマリカラー
UI全体の中でも主要なコンポーネントに使われる。
セカンダリカラー
あまり目立たないコンポーネントに使われる。
ターシャリカラー
プライマリとセカンダリのバランスを取ったり、要素の注目度を高めたりするアクセントとして使われる。
ニュートラルカラー
普通は白系と黒系。サーフェス（表示面）と背景、重要度の高いテキストやアイコンに使用。
ニュートラルバリアントカラー
ニュートラルが白や黒ならバリアントは中間のグレー系。重要度の低いテキストとアイコン、アウトラインの色など。

トーンパレット：白と黒を含む13のトーン

白と黒を含む13段階のトーンでトーンパレットが構成される。

原文の図解がわかりやすいです。

Color roles

要点

・カラーロール：13のトーンの中から選ばれたUI上の役割
・アクセントカラーロールの使用例
・ニュートラルカラーロールの使用例
・サーフェスは色分けで高度（Elevation）が表現される
・アウトラインカラーに関するいくつかの注意点
・アウトラインバリアントカラーに関するいくつかの注意点

カラーロール：13のトーンの中から選ばれたUI上の役割

トーンパレットの13色の中から何色かが選ばれてUIコンポーネントにマッピングされる。
例えば、プライマリキーカラーのトーンパレットの中から次の4色が割り当てられる。
- プライマリ：ベースカラー
- オンプライマリ：プライマリの上に載せるコンテンツ（アイコンやテキストなど）に適用。
- プライマリコンテナ：プライマリよりも強調する必要のない要素に適用。
- オンプライマリコンテナ：プライマリコンテナの上に配置されるコンテンツ（アイコンやテキストなど）に適用。
- 原文の図像を参照。
16進数の値を割り当てるのではなく、トークンを使ってロールをマッピングして実装することで、カラーパレットが変更されてもカラーを体系的に更新することができる。

アクセントカラーロールの使用例

プライマリ：FAB、プライマリボタン、アクティブ状態の表現、サーフェスの高度（Elevation）の表現（後述）など。図像
セカンダリ：フィルターチップ、セカンダリボタン、ボトムアプリバーのアクティブ状態など。図像
ターシャリ：あまり固定されていない。プライマリとセカンダリのバランスを取ったり、入力欄などの要素に注目させるなど、アクセントとして。図像も一例のみ。

ニュートラルカラーロールの使用例

ニュートラル：背景、背景の上の要素、サーフェス（表示面）、サーフェスの上の要素。
インバースロール：通常の背景とその上の要素の関係を逆転した配色。通常の背景が白で要素が黒なら、インバース配色では背景が黒で要素が白。スナックバーなどに適用される。図像
ニュートラルバリアント：入力欄の背景色、補助テキスト、ボタンや入力欄のアウトラインなど。図像

サーフェスは色分けで高度（Elevation）が表現される

コンテンツの表示面のことをサーフェス（Surface）と呼ぶ。
背景色（Background）は一定だが、サーフェスは一定ではなく、半透明のカラーオーバーレイによって高度（Elevation）が表現される。
高度が高ければ高いほど、オーバーレイの不透明度が高くなる。
オーバーレイの色にはプライマリカラーが適用される。

アウトラインカラーに関するいくつかの注意点

アウトラインカラーはすべての高度のサーフェスカラーと3:1以上のコントラスト比を持つ。
カードなどの複数の要素を含むコンポーネントには使用しない。
要求されるコントラス比が異なるため、分割線（Divider）にはアウトラインカラーは使用しない。

アウトラインバリアントカラーに関するいくつかの注意点

アウトラインバリアントカラーは、3:1のコントラスト比が必要ないときに装飾的に使用する色。
分割線にはアウトラインバリアントカラーを使用する。
チップ・ボタン・入力欄など、境界がはっきりわかる必要がある要素にはアウトラインカラーを使う。

Custom colors

要点

・カスタムカラーを設定すると、自動的に補色のセットが割り当てられる
・カスタムカラーとユーザーカラーは自動的に調和するように調整される

カスタムカラーを設定すると、自動的に補色のセットが割り当てられる

他の5つのキーカラーと同様に、キーカラーを元に背景色やその上の要素の色が生成される。
背景と要素が十分なコントラスト比を持つように明度が調整される。そのため、自動生成されるカラースキームには設定したカスタムカラーそのものが含まれない場合もある。

「設定したカスタムカラーそのものが含まれない場合もある」については、原文の図像がわかりやすいです。

カスタムカラーとユーザーカラーは自動的に調和するように調整される

ユーザーの設定やコンテンツによって動的にカラーが変化する場合、カスタムカラーはそれに対応して色調が調整される。動画

Accessibility

要点

・M3のカラーシステムはデフォルトでアクセシブルな配色を実現する
・13のトーンとコントラスト比
・原文の文字サイズpt値についての補足

M3のカラーシステムはデフォルトでアクセシブルな配色を実現する

M3のコンポーネントは、トーンパレットの生成とカラーロールのマッピングによって、デフォルトでアクセシブルなコントラスト比を満たすように設計されている。
動的に配色を変更したり、明るいテーマから暗いテーマに切り替えたりしても、コントラスト比は固定されたまま保たれる。
例えば、 Primary Container と On Primary Container の間では常に7:1以上のコントラスト比が保たれるようになっている。

13のトーンとコントラスト比

各キーカラーをもとに生成される13のトーンによって、アクセシブルなコントラスト比を満たすための配色を実現する。
13のトーンには値が割り振られている。
0・10・20・30・40・50・60・70・80・90・95・99・100
このトーン値は、2つのトーンの差分によって以下のコントラスト比を保証できるように配分されている。
- 40以上離れていたら3:1以上のコントラスト比
- 50以上離れていたら4.5:1以上のコントラスト比

原文の文字サイズpt値についての補足

「大きな文字」として18pt、14ptという数値の記載があるが、このptはCSSのptのこと。pxでいうとそれぞれ30px、24pxになる。
原文の記載例：大きな文字（18pt以上、太字の場合は14pt以上）は、標準的なアクセシビリティ（AAとして等級付け）の場合は3：1、より大きなアクセシビリティ（AAAとして等級付け）の場合は4.5：1のコントラスト比を満たす必要があります。

この記事が気に入ったらサポートをしてみませんか？