Couleur

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 :

Conseil

Pour obtenir une vue d’ensemble visuelle des pinceaux de thème disponibles, consultez l’application galerie WinUI 3 : Couleurs

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 la Boutique Microsoft ou le code source sur GitHub.

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.

Couleur 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 :

• SystemAccentColorLight3
• SystemAccentColorLight2
• SystemAccentColorLight1
• SystemAccentColorDark1
• SystemAccentColorDark2
• SystemAccentColorDark3

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.

Connexe

• Styles XAML
• Ressources de thème XAML
• Galerie WinUI 3 - Couleurs