Material Design 3 要点まとめ #6 Color - Overview
Material Design 3 ガイドラインの要点をまとめたものです。
第6・7・8回はColorの章。長いので記事を3つに分けます。今回は概要のみ。重要なキーワードの紹介といったところ。
M2からの更新ポイント
・ダイナミックカラーの導入
・デザイントークン & カラーロールの導入
・アクセシビリティの強化
ダイナミックカラーの導入
ダイナミックカラーとは、さまざまなソースや条件に応じて色を適用するカラーシステムのこと。
カラーシステムによって、自動的に多くのデフォルト値が提供される。それらはカスタマイズの出発点として利用できる。
ユーザーの好みの設定や壁紙、コンテンツの画像などに応じて動的に変化する。
「カスタマイズの出発点」と明記されています。提供するシステムを遵守せよということではなく、高品質な初期値を用意するから自由にカスタマイズしてね、という態度のあらわれでしょうか。コントラスト比など最低限のところは初期値でフォローしてくれるところが心強いですね。
ダイナミックカラーについては前記事にも概要があります。
詳細な内容はこちらの記事で触れてます。
デザイントークン & カラーロールの導入
UIにおける要素の色を設定値ではなくカラーロールで割り当てる。
製品全体の柔軟性と一貫性を実現。
トークンは、要素の割り当てられたロールと、ロールのために選択されたカラー値との間の橋渡しの役割を果たす。
デザイントークンについてはこちらの記事に詳細があります。
具体的には、原文の How to read tokens や Color system / Tokens 、各コンポーネントの Specs（例：Buttons）を見るとイメージが付きやすいです。
アクセシビリティの強化
ダイナミックカラーは、色のコントラストに関するアクセシビリティの基準を満たすように設計されている。
色調の距離に基づいて色がペアリングされるため、色相の変化にかかわらずコントラスト要件が満たされる。
この記事が気に入ったらサポートをしてみませんか？