Couleur dans Windows
Windows utilise la couleur pour aider les utilisateurs à se concentrer sur leurs tâches en indiquant une hiérarchie visuelle et une structure entre les éléments de l’interface utilisateur. La couleur est adaptée au contexte et utilisée pour créer une base apaisante, en améliorant subtilement les interactions avec l'utilisateur et en mettant l'accent sur les éléments importants uniquement lorsque cela est nécessaire.
Conseil
Cet article décrit comment le langage Fluent Design est appliqué aux applications Windows. Pour plus d’informations, consultez Fluent Design - Couleur.
Modes de couleur
Windows prend en charge deux modes de couleur ou thèmes : clair et foncé. Chaque mode se compose d’un ensemble de valeurs de couleur neutre qui sont automatiquement ajustées pour veiller à un contraste optimal.
Dans les modes de couleur claire et foncée, les couleurs plus sombres indiquent des surfaces d’arrière-plan moins importantes. Les surfaces importantes sont mises en surbrillance avec des couleurs plus claires et plus brillantes. Pour plus d’informations, consultez la couche et l’élévation.
Couleur d’accentuation
La couleur d’accentuation est utilisée pour mettre en évidence des éléments importants dans l’interface utilisateur et pour indiquer l’état d’un objet ou d’un contrôle interactif. Les valeurs de couleur d’accentuation sont générées automatiquement et optimisées pour le contraste dans les modes clair et sombre. Les couleurs d’accentuation sont utilisées avec modération pour mettre en évidence des éléments importants et transmettre des informations sur l’état d’un élément interactif.
Exemples
L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.
Couleur dans les applications Windows
La couleur fournit un moyen intuitif de communiquer des informations aux utilisateurs de votre application : elle peut être utilisée pour indiquer une interactivité, donner un feedback aux actions de l’utilisateur et procurer à votre interface une certaine continuité visuelle.
Dans les applications Windows, les couleurs sont principalement déterminées par la couleur d’accentuation et le thème. Dans cet article, nous expliquons comment utiliser la couleur dans votre application, et comment utiliser les ressources de couleur d’accentuation et de thème pour rendre votre application Windows utilisable dans n’importe quel contexte de thème.
Principes des couleurs
Utilisez les couleurs de manière intelligente. Lorsqu’une couleur est utilisée avec parcimonie pour mettre en évidence des éléments importants, elle permet de créer une interface utilisateur fluide et intuitive.
Utilisez les couleurs pour indiquer l’interactivité. Il est recommandé de choisir une couleur pour indiquer les éléments interactifs de votre application. Par exemple, la plupart des pages web utilisent du texte en bleu pour représenter un lien hypertexte.
Le choix de couleurs est personnel. Dans Windows, les utilisateurs peuvent choisir une couleur d’accentuation et un thème clair ou foncé, qui sont conservés tout au long de leur expérience. Vous pouvez choisir comment incorporer la couleur d’accentuation et le thème de l’utilisateur dans votre application pour personnaliser son expérience.
Le choix de couleurs est culturel. Prenez en compte la façon dont les couleurs utilisées seront interprétées par des personnes de différentes cultures. Par exemple, dans certaines cultures, la couleur bleue est associée à la vertu et à la protection, tandis que dans d’autres cultures, elle représente le deuil.
Thèmes
Les applications Windows peuvent utiliser un thème d’application clair ou foncé. Le thème affecte les couleurs de l’arrière-plan, du texte, des icônes et des contrôles courants de l’application.
Thème Clair
Thème foncé
Par défaut, le thème de votre application Windows est la préférence de thème de l’utilisateur définie dans les paramètres Windows, ou le thème par défaut de l’appareil. Toutefois, vous pouvez définir le thème spécifiquement pour votre application Windows.
Changement du thème
Vous pouvez changer de thèmes en modifiant la propriété RequestedTheme dans votre fichier App.xaml.
<Application
x:Class="App9.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App9"
RequestedTheme="Dark">
</Application>
La suppression de la propriété RequestedTheme signifie que votre application utilise les paramètres système de l’utilisateur.
Les utilisateurs peuvent également sélectionner le thème à contraste élevé, qui utilise une petite palette de couleurs contrastées pour faciliter la visualisation de l’interface. Dans ce cas, le système remplace votre propriété RequestedTheme.
Test des thèmes
Si vous ne demandez pas un thème pour votre application, veillez à tester votre application dans les thèmes clair et foncé pour vérifier qu’elle est lisible dans toutes les conditions.
Pinceaux de thème
Les contrôles courants utilisent automatiquement des pinceaux de thème pour ajuster le contraste des thèmes clair et foncé.
Par exemple, voici une illustration de la façon dont AutoSuggestBox utilise les pinceaux de thème :
Utilisation des pinceaux de thème
Lors de la création de modèles pour les contrôles personnalisés, utilisez les pinceaux de thème au lieu de coder en dur les valeurs de couleur. De cette façon, votre application peut facilement s’adapter à n’importe quel thème.
Par exemple, ces modèles d’éléments pour ListView montrent comment utiliser des pinceaux de thème dans un modèle personnalisé.
<ListView ItemsSource="{x:Bind ViewModel.Recordings}">
<ListView.ItemTemplate>
<DataTemplate x:Name="DoubleLineDataTemplate" x:DataType="local:Recording">
<StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{x:Bind CompositionName}">
<Ellipse Height="48" Width="48" VerticalAlignment="Center">
<Ellipse.Fill>
<ImageBrush ImageSource="Placeholder.png"/>
</Ellipse.Fill>
</Ellipse>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
<TextBlock Text="{x:Bind CompositionName}" Style="{ThemeResource BodyStrongTextBlockStyle}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
<TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Pour plus d’informations sur l’utilisation des pinceaux de thème dans votre application, consultez Ressources de thème.
Couleurs d’accentuation
Les contrôles courants utilisent une couleur d’accentuation pour donner des informations d’état. Par défaut, la couleur d’accentuation est la valeur de SystemAccentColor sélectionnée par les utilisateurs dans leurs paramètres. Cependant, vous pouvez aussi personnaliser la couleur d’accentuation de votre application pour refléter votre marque.
Remplacement de la couleur d’accentuation
Pour changer la couleur d’accentuation de votre application, placez le code suivant dans app.xaml.
<Application.Resources>
<ResourceDictionary>
<Color x:Key="SystemAccentColor">#107C10</Color>
</ResourceDictionary>
</Application.Resources>
Choix d’une couleur d’accentuation
Si vous sélectionnez une couleur d’accentuation personnalisée pour votre application, vérifiez que le texte et les arrière-plans qui utilisent la couleur d’accentuation ont un contraste suffisant pour assurer une lisibilité optimale. Pour tester le contraste, vous pouvez utiliser l’outil Sélecteur de couleurs dans les paramètres Windows, ou vous pouvez utiliser ces outils de contraste en ligne.
Palette de couleurs d’accentuation
Un algorithme de couleur d’accentuation dans le shell Windows génère des nuances claires et foncées de la couleur d’accentuation.
Ces nuances sont accessibles en tant que ressources de thème :
SystemAccentColorLight3SystemAccentColorLight2SystemAccentColorLight1SystemAccentColorDark1SystemAccentColorDark2SystemAccentColorDark3
Vous pouvez également accéder à la palette de couleurs d’accentuation par programmation avec la méthode UISettings.GetColorValue et l’énumération UIColorType.
Vous pouvez utiliser la palette de couleurs d’accentuation pour les thèmes de couleur de votre application. Voici un exemple de l’utilisation de la palette de couleurs d’accentuation sur un bouton.
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemAccentColorLight1}"/>
<SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemAccentColorDark1}"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Page.Resources>
<Button Content="Button"></Button>
Quand vous utilisez du texte en couleur sur un arrière-plan en couleur, vérifiez que le contraste est suffisant entre le texte et l’arrière-plan. Par défaut, le lien hypertexte utilise la couleur d’accentuation. Si vous appliquez des variantes de la couleur d’accentuation à l’arrière-plan, vous devez utiliser une variante de la couleur d’accentuation d’origine pour optimiser le contraste du texte en couleur sur un arrière-plan en couleur.
Le graphique ci-dessous illustre un exemple des différentes nuances claires et foncées de la couleur d’accentuation. Il décrit également comment le type peut être appliqué sur une surface en couleur.
Pour plus d’informations sur l’application de styles aux contrôles, voir Styles XAML.
API de couleur
Vous pouvez utiliser plusieurs API pour ajouter de la couleur à votre application. Il y a d’abord la classe Colors, qui implémente une longue liste de couleurs prédéfinies. Celles-ci sont accessibles automatiquement avec les propriétés XAML. Dans l’exemple ci-dessous, nous créons un bouton et nous définissons les propriétés de couleur d’arrière-plan et de premier plan pour les membres de la classe Colors.
<Button Background="MediumSlateBlue" Foreground="White">Button text</Button>
Vous pouvez créer vos propres couleurs à partir des valeurs RVB ou hexadécimales en utilisant la structure Color en XAML.
<Color x:Key="LightBlue">#FF36C0FF</Color>
Vous pouvez également créer la même couleur dans le code à l’aide de la méthode FromArgb.
Color LightBlue = Color.FromArgb(255,54,192,255);
Windows::UI::Color LightBlue = Windows::UI::ColorHelper::FromArgb(255,54,192,255);
Les lettres « Arvb » signifient Alpha (opacité), Rouge, Vert et Bleu, qui sont les quatre composants d’une couleur. Chaque argument peut être compris entre 0 et 255. Vous pouvez choisir d’omettre la première valeur, ce qui vous donne une opacité par défaut de 255, c’est-à-dire 100 % opaque.
Remarque
Si vous utilisez C++, vous devez créer des couleurs à l’aide de la classe ColorHelper.
Un objet Color est le plus souvent utilisé comme argument d’un objet SolidColorBrush, qui peut être utilisé pour peindre les éléments de l’interface utilisateur dans une seule couleur unie. Ces pinceaux sont généralement définis dans un objet ResourceDictionary : ils peuvent donc être réutilisés pour plusieurs éléments.
<ResourceDictionary>
<SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#FFFF4F67"/>
<SolidColorBrush x:Key="ButtonForegroundBrush" Color="White"/>
</ResourceDictionary>
Pour plus d’informations sur l’utilisation des pinceaux, consultez Pinceaux XAML.
Usage
Contraste
Assurez-vous que les éléments et les images ont un contraste suffisant pour que l’on puisse les distinguer, quelle que soit la couleur d’accentuation ou le thème.
Lorsque vous vous demandez quelle couleur vous devriez utiliser dans votre application, rappelez-vous que l’accessibilité doit être une préoccupation principale. Utilisez les instructions ci-dessous pour vous assurer que votre application est accessible au plus grand nombre d'utilisateurs possible/.
Éclairage
Notez la variation de l’éclairage ambiant peut avoir un impact sur la convivialité de votre application. Par exemple, une page avec un arrière-plan noir peut être illisible à l’extérieur à cause de la présence de reflets sur l'écran, tandis qu’une page avec un arrière-plan blanc peut être difficile à lire dans une pièce sombre.
Daltonisme
N’oubliez pas que le daltonisme peut avoir un impact sur votre application et la rendre difficile à utiliser. Par exemple, un utilisateur souffrant de daltonisme rouge-vert aura ne pourra pas facilement déterminer quels sont les éléments rouges et quels sont les éléments verts. Environ 8 % des hommes et 0,5 % des femmes souffrent de daltonisme rouge-vert. Veillez donc à ne pas utiliser ces combinaisons de couleurs comme unique moyen de différenciation des éléments de l’application.
Rubriques connexes
Windows developer