Couleurs de votre application Microsoft Teams

Le web et le bureau Teams prennent en charge les thèmes par défaut (clair), sombre et à contraste élevé, tandis que les appareils mobiles Teams prennent en charge les thèmes clair et sombre. Chaque thème a son propre modèle de couleurs.

Conseils

Utiliser des couleurs Teams standard, conçues pour répondre aux exigences de contraste WCAG (Web Content Accessibility Guidelines) 2.1, garantit une expérience cohérente et accessible sur les thèmes pris en charge.

L’exemple montre comment ajouter des couleurs si nécessaire.

Ajouter des couleurs si nécessaire

Commencez à partir d’un canevas blanc et ajoutez des couleurs uniquement si nécessaire. Évitez d’utiliser des couleurs pour peindre de grandes surfaces telles que des cartes. Utilisez plutôt des couleurs pour créer une hiérarchie, par exemple en mettant en surbrillance des actions importantes.

L’exemple montre les recommandations pour placer l’accessibilité en premier.

Placer l’accessibilité en premier

Essayez toujours de présenter le contenu de l’application avec tous les besoins et préférences de l’utilisateur à l’esprit. La couleur du texte et les éléments importants tels que les icônes doivent être accessibles.

L’exemple montre les recommandations pour utiliser les couleurs de manière cohérente.

Utiliser les couleurs de manière cohérente

Ne confondez pas en utilisant des couleurs de manière incohérente. Utilisez les couleurs principales teams et les couleurs secondaires, qui transmettent l’activité, les erreurs et d’autres états courants.

Couleurs primaires et jetons de couleur

Chaque thème Teams a son propre modèle de couleurs. Pour gérer automatiquement les modifications de thème, vous pouvez spécifier des jetons de couleur dans votre conception.

Découvrez comment utiliser des jetons de couleur dans votre projet d’application Teams.

Exemple de conception avec des jetons

Exemple montrant les jetons de couleur de thème clair.

Les valeurs de jeton suivantes concernent le thème (clair) par défaut :

Compteur Description
A Arrière-plan 2 : couleur d’arrière-plan du canevas
B Premier plan par défaut : couleur du texte principal
C Premier plan 1 : couleur du texte secondaire
D Arrière-plan de la marque : couleur d’arrière-plan du bouton principal
E Premier plan de la marque : couleur du texte du lien

Intégrer la palette de couleurs de vos applications à Teams

Couleur primaire

Exemple montrant un écran d’application avec l’utilisation de la couleur principale.

Compteur Description
1 Couleur du bouton Action dans un composant incorporé
2 Couleur du bouton Action dans une application personnelle
Appliquer la couleur primaire

L’exemple montre les avantages de l’application de couleurs primaires.

Couleurs secondaires

Exemple montrant l’application de couleurs secondaires.

Compteur Description
1 Couleurs secondaires Teams
2 Couleurs secondaires personnalisées dans un exemple d’application

Meilleures pratiques

L’exemple montre l’utilisation de couleurs à des fins.

À faire : utiliser des couleurs à des fins

Les couleurs doivent être utilisées pour mettre en surbrillance les fonctionnalités, définir la hiérarchie et transmettre différents états. Évitez d’utiliser des couleurs quand elles ne sont liées à aucune signification sémantique.

L’exemple montre l’utilisation d’une palette de couleurs naturelles.

À faire : utiliser la palette de couleurs neutres pour créer de la profondeur

Utilisez toujours la palette de couleurs neutre et grisée fournie dans ce kit comme base de votre interface utilisateur. Vous pouvez inclure des étapes supplémentaires de gris pour renforcer un sentiment de profondeur et de hiérarchie. Les calques doivent apparaître plus lumineux quand ils se déplacent vers le haut de l’axe z.

Exemple montrant un carte héros pour indiquer une utilisation incorrecte des couleurs

À ne pas faire : utiliser la couleur pour la personnalisation uniquement

N’utilisez pas de couleurs uniquement à des fins de personnalisation ou de plaisir visuel. Évitez d’utiliser des couleurs sur de grandes surfaces, telles que l’arrière-plan des cartes et des en-têtes.

L’exemple montre un exemple de différentes nuances de gris pour le thème clair et foncé.

À ne pas faire : Devenez trop compliqué

Par exemple, n’avez pas de nuances différentes de gris pour les thèmes clair et foncé. En outre, sur les grandes surfaces, n’utilisez jamais de couleurs neutres qui ne sont pas des nuances de gris.