Microsoft Teams アプリの色

Teams Web とデスクトップでは既定のテーマ (明るいテーマ)、ダーク テーマ、ハイコントラスト テーマがサポートされていますが、Teams モバイルでは明るいテーマとダーク テーマがサポートされています。 各テーマには独自の配色があります。

ガイドライン

Web コンテンツ アクセシビリティ ガイドライン (WCAG) 2.1 のコントラスト要件を満たすように設計された標準の Teams の色を使用すると、サポートされているテーマ全体で一貫性のあるアクセシビリティの高いエクスペリエンスが保証されます。

必要に応じて色を追加する

白いキャンバスから開始し、必要な場合にのみ色を追加します。 カードなどの大きなサーフェスを塗りつぶすために色を使用しないでください。 代わりに、重要なアクションを強調表示するなど、色を使用して階層を作成します。

アクセシビリティを優先する

常に、すべてのユーザーのニーズと好みを念頭に置いてアプリ コンテンツを表示することを目指します。 テキストの色やアイコンなどの重要な要素にアクセスできる必要があります。

色を一貫して使用する

色を一貫性のない方法で使用して混同しないでください。 アクティビティ、エラー、およびその他の一般的な状態を伝える Teams コアカラーとセカンダリ カラーを使用します。

原色と色トークン

各 Teams テーマには独自の配色があります。 テーマの変更を自動的に処理するには、デザインで色トークンを指定します。

Teams アプリ プロジェクトでカラー トークンを使用する方法について説明します。

トークンを使用した設計の例

既定の (ライト) テーマのトークン値は次のとおりです。

カウンター	説明
A	背景 2: キャンバスの背景色
B	既定の前景: プライマリ テキストの色
C	前景 1: セカンダリ テキストの色
D	ブランドの背景: プライマリ ボタンの背景色
E	前景のブランド: テキストの色をリンクする

アプリのカラー パレットを Teams と統合する

原色

カウンター	説明
1	埋め込みコンポーネントのアクション ボタンの色
2	個人用アプリのアクション ボタンの色

原色を適用する

セカンダリ カラー

カウンター	説明
1	Teams のセカンダリ カラー
2	サンプル アプリのカスタムセカンダリカラー

ベスト プラクティス

Do: 目的に合わせて色を使用する

色は、機能の強調表示、階層の定義、さまざまな状態の伝達に使用する必要があります。 セマンティックな意味に結び付けられていない場合は、色を使用しないでください。

操作: ニュートラル カラー パレットを使用して深度を作成する

このキットで提供されているニュートラルなグレースケールカラーパレットを、UI のベースとして常に使用します。 灰色の追加の手順を含め、奥行きと階層の感覚を強化できます。 レイヤーは z 軸を上に移動すると明るく表示される必要があります。

しない: ブランド化にのみ色を使用する

ブランド化や視覚的な喜びのためだけに色を使用しないでください。 カードやヘッダーの背景など、大きなサーフェスで色を使用しないでください。

しない: 複雑すぎる

たとえば、明るいテーマと暗いテーマに異なる灰色の色合いを設定しないでください。 また、大きなサーフェスでは、グレースケールではないニュートラル カラーは使用しないでください。