Thèmes contrastés

Les thèmes de contraste utilisent une petite palette de couleurs (avec un rapport de contraste d’au moins 7:1) pour faciliter la visibilité des éléments de l’interface utilisateur, réduire la fatigue oculaire, améliorer la lisibilité du texte et s’adapter aux préférences utilisateur.

Notes

Ne confondez pas les thèmes de contraste avec les thèmes clairs et foncés, qui prennent en charge une palette de couleurs beaucoup plus grande et n’augmentent pas nécessairement le contraste ou rendent les choses plus faciles à voir. Pour plus d’informations sur les thèmes clairs et sombres, consultez Couleur.

Pour voir comment votre application se comporte avec les thèmes de contraste, activez-les et personnalisez-les via la page Paramètres > des thèmes de contraste d’accessibilité>.

Conseil

Vous pouvez également appuyer sur la touche Alt de gauche + Maj + Imprimer l’écran (PrtScn sur certains claviers) pour activer ou désactiver rapidement les thèmes de contraste. Si vous n’avez pas sélectionné de thème précédemment, le thème Aquatique est utilisé par défaut (illustré dans l’image suivante).

Définition de HighContrastAdjustment sur None

Les applications Windows ont HighContrastAdjustment activé par défaut. Cela définit la couleur du texte sur le blanc avec une mise en surbrillance noire uni derrière elle, garantissant un contraste suffisant par rapport à tous les arrière-plans. Si vous utilisez correctement les pinceaux, ce paramètre doit être désactivé.

Détection du contraste élevé

Vous pouvez case activée par programmation si le thème actuel est un thème de contraste via la classe AccessibilitySettings (vous devez appeler le constructeur AccessibilitySettings à partir d’une étendue où l’application est initialisée et affiche déjà du contenu).

Création de dictionnaires de thèmes

Un objet ResourceDictionary.ThemeDictionaries peut indiquer des couleurs de thème différentes des couleurs définies par le système en spécifiant des pinceaux pour les thèmes de contraste Default (Dark), Light et HighContrast .

Conseil

Le thème de contraste fait référence à la fonctionnalité en général, tandis que HighContrast fait référence au dictionnaire spécifique référencé.

1. Dans App.xaml, créez une collection ThemeDictionaries avec à la fois Default et HighContrastResourceDictionary (un LightResourceDictionary n’est pas nécessaire pour cet exemple).

2. Dans le dictionnaire par défaut , créez le type de pinceau dont vous avez besoin (généralement un SolidColorBrush). Donnez-lui un nom x:Key correspondant à son utilisation prévue (une StaticResource référençant un pinceau système existant serait également appropriée).

3. Dans highContrast ResourceDictionary (illustré dans l’extrait de code suivant), spécifiez un pinceau SystemColor approprié. Pour plus d’informations sur la sélection de l’une des couleurs HighContrast du système dynamique pour le pinceau SystemColor, consultez Couleurs de contraste.

   <Application.Resources>
       <ResourceDictionary>
           <ResourceDictionary.ThemeDictionaries>
               <!-- Default is a fallback if a more precise theme isn't called
               out below -->
               <ResourceDictionary x:Key="Default">
                   <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="#E6E6E6" />
               </ResourceDictionary>
   
               <!-- Optional, Light is used in light theme.
               If included, Default will be used for Dark theme -->
               <ResourceDictionary x:Key="Light">
                   <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="#E6E6E6" />
               </ResourceDictionary>
   
               <!-- HighContrast is used in all high contrast themes -->
               <ResourceDictionary x:Key="HighContrast">
                   <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="{ThemeResource SystemColorWindowColor}" />
               </ResourceDictionary>
           </ResourceDictionary.ThemeDictionaries>
       </ResourceDictionary>
   </Application.Resources>
   

Couleurs de contraste

Dans la page Paramètres > Facilité d’accès > Thèmes de contraste (illustré dans l’image suivante), les utilisateurs peuvent choisir parmi quatre thèmes de contraste par défaut : Aquatique, Désert, Crépuscule et Ciel nocturne.

Une fois que l’utilisateur a sélectionné une option, il peut choisir de l’appliquer immédiatement ou de modifier le thème. L’image suivante montre la boîte de dialogue Modifier le thème pour le thème de contraste aquatique .

Ce tableau montre les couleurs de thème de contraste et leurs paires recommandées. Chaque ressource SystemColor est une variable qui met automatiquement à jour la couleur lorsque l’utilisateur change de thème de contraste.

Nuance de couleur	Description
	SystemColorWindowColor Arrière-plan des pages, des volets, des fenêtres contextuelles et des fenêtres. Associer avec SystemColorWindowTextColor
	SystemColorWindowTextColor En-têtes, copie de corps, listes, texte d’espace réservé, bordures d’application et de fenêtre, toute interface utilisateur avec laquelle il est impossible d’interagir. Associer avec SystemColorWindowColor
	SystemColorHotlightColor Hyperliens. Associer avec SystemColorWindowColor
	SystemColorGrayTextColor Interface utilisateur inactive (désactivée). Associer avec SystemColorWindowColor
	SystemColorHighlightTextColor Couleur de premier plan pour le texte ou l’interface utilisateur sélectionné, interagissant avec (pointeur, appuyez) ou en cours. Associer avec SystemColorHighlightColor
	SystemColorHighlightColor Couleur d’arrière-plan ou d’accentuation pour l’interface utilisateur sélectionnée, interagissant avec (pointeur, appuyez) ou en cours. Associer avec SystemColorHighlightTextColor
	SystemColorButtonTextColor Couleur de premier plan pour les boutons et toute interface utilisateur avec laquelle vous pouvez interagir. Associer avec SystemColorButtonFaceColor
	SystemColorButtonFaceColor Couleur d’arrière-plan pour les boutons et toute interface utilisateur avec laquelle vous pouvez interagir. Associer avec SystemColorButtonTextColor

Le tableau suivant montre comment les couleurs apparaissent lorsqu’elles sont utilisées sur un arrière-plan défini sur SystemColorWindowColor.

Exemple	Valeurs
	SystemColorWindowTextColor
	SystemColorHotlightColor
	SystemColorGrayTextColor
	SystemColorHighlightTextColor + SystemColorHighlightColor
	SystemColorButtonTextColor + SystemColorButtonFaceColor

Dans l’extrait de code suivant, nous montrons comment choisir une ressource pour BrandedPageBackgroundBrush. SystemColorWindowColor est un bon choix ici, car BrandedPageBackgroundBrush indique qu’il sera utilisé pour un arrière-plan.

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <!-- Default is a fallback if a more precise theme isn't called
            out below -->
            <ResourceDictionary x:Key="Default">
                <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="#E6E6E6" />
            </ResourceDictionary>

            <!-- Optional, Light is used in light theme.
            If included, Default will be used for Dark theme -->
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="#E6E6E6" />
            </ResourceDictionary>

            <!-- HighContrast is used in all high contrast themes -->
            <ResourceDictionary x:Key="HighContrast">
                <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="{ThemeResource SystemColorWindowColor}" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>

La ressource est ensuite affectée à l’arrière-plan d’un élément.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Nous utilisons {ThemeResource} deux fois dans l’exemple précédent, une pour référencer SystemColorWindowColor et à nouveau pour référencer BrandedPageBackgroundBrush. Les deux instances sont nécessaires pour la bonne définition du thème lors de l’exécution. Il s’agit d’un bon moment pour tester la fonctionnalité dans votre application. L’arrière-plan Grid est automatiquement mis à jour lorsque vous basculez vers un thème à contraste élevé. Il est également mis à jour lorsque vous basculez entre deux thèmes à contraste élevé différents.

Notes

WinUI 2.6 et versions ultérieures

Il existe huit pinceaux système à contraste élevé disponibles pour le référencement via un ResourceKey (voir l’exemple suivant pour SystemColorWindowTextColorBrush).

<StaticResource x:Key="MyControlBackground" ResourceKey="SystemColorWindowTextColorBrush" />

Les noms de pinceau correspondent exactement à l’une des huit couleurs système mentionnées précédemment (avec « Pinceau » ajouté). Nous vous recommandons d’utiliser un StaticResource au lieu d’un SolidColorBrush local pour des raisons de performances.

Bonnes pratiques

Voici quelques recommandations pour personnaliser les couleurs de thème de contraste dans votre application Windows.

• Testez les quatre thèmes à contraste élevé pendant que votre application est en cours d’exécution.
• Soyez cohérent.
• Assurez-vous que HighContrastAdjustment est défini None sur dans votre application (il est activé par défaut). Consultez Définition de HighContrastAdjustment sur None.
• Ne codez pas en dur une couleur dans le thème HighContrast. Utilisez plutôt SystemColorColor et ColorBrush les ressources. Pour plus d’informations, consultez Couleurs codées en dur.
• Ne pas mélanger les paires arrière-plan/premier plan qui ne sont pas compatibles
• Ne choisissez pas de ressource de couleur pour l’esthétique. N’oubliez pas que les couleurs changent avec le thème.
• N’utilisez pas pour la SystemColorGrayTextColor copie de corps qui est secondaire ou qui sert de texte d’indicateur. Cela est destiné uniquement au contenu désactivé.
• N’utilisezSystemColorHotlightColor pas et le pinceau correspondant, car les deux sont réservés aux liens hypertexte.

Conseil

Il est souvent utile d’examiner l’application WinUI Gallery pour voir comment les contrôles courants utilisent les pinceaux SystemColor . Si elles sont déjà installées, ouvrez-les en cliquant sur les liens suivants : WinUI 3 Gallery ou WinUI 2 Gallery.

Si elles ne sont pas installées, vous pouvez télécharger WinUI 3 Gallery et WinUI 2 Gallery à partir du Microsoft Store.

Vous pouvez également obtenir le code source des deux applications à partir de GitHub (utilisez la branche main pour WinUI 3 et la branche winui2 pour WinUI 2).

Couleurs codées en dur

Les contrôles de plateforme fournissent une prise en charge intégrée des thèmes de contraste, mais vous devez être prudent lors de la personnalisation de l’interface utilisateur de votre application. Deux des problèmes les plus courants se produisent lorsque la couleur d’un élément est codée en dur ou lorsqu’une ressource SystemColor incorrecte est utilisée.

Dans l’extrait de code suivant, nous montrons un élément Grid déclaré avec une couleur d’arrière-plan définie sur #E6E6E6 (gris très clair). Si vous codez en dur la couleur de cette façon, vous remplacez également la couleur d’arrière-plan pour tous les thèmes. Par exemple, si l’utilisateur sélectionne le thème de contraste aquatique , au lieu du texte blanc sur un arrière-plan presque noir, la couleur du texte dans cette application passe au blanc tandis que l’arrière-plan reste gris clair. Le contraste très faible entre le texte et l’arrière-plan pourrait rendre cette application très difficile à utiliser.

<Grid Background="#E6E6E6">

Au lieu de cela, nous vous recommandons d’utiliser l’extension de balisage {ThemeResource} pour référencer une couleur dans la collection ThemeDictionaries d’un ResourceDictionary. Cela permet la substitution automatique des couleurs et des pinceaux en fonction du thème actuel de l’utilisateur.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Bordures

Les pages, les volets, les fenêtres contextuelles et les barres doivent tous utiliser SystemColorWindowColor pour leur arrière-plan. Ajoutez une bordure de thème de contraste uniquement si nécessaire pour conserver des limites importantes dans votre interface utilisateur.

Conseil

Nous vous recommandons d’utiliser des bordures 2px pour les surfaces temporaires telles que les menus volants et les boîtes de dialogue.

Le volet de navigation et la page partagent la même couleur d’arrière-plan dans les thèmes de contraste. Pour les distinguer, une bordure de thème de contraste est essentielle.

Éléments de liste avec du texte coloré

En revanche, l’arrière-plan des éléments d’un ListView est défini sur SystemColorHighlightColor lorsque l’utilisateur les survole, les appuie ou les sélectionne. Un problème courant avec les éléments de liste complexes se produit lorsque le contenu de l’élément de liste ne parvient pas à inverser sa couleur, ce qui rend les éléments impossibles à lire.

Soyez prudent lorsque vous définissez le TextBlock.Foreground dans le DataTemplate du ListView (généralement fait pour établir une hiérarchie visuelle). La propriété Foreground est définie sur l’objet ListViewItem, et chaque TextBlock du DataTemplate hérite de la couleur de premier plan appropriée. La définition du premier plan interrompt cet héritage.

Vous pouvez résoudre ce problème en définissant foreground de manière conditionnelle via un style dans une collection ThemeDictionaries . Comme le premier plan n’est pas défini par SecondaryBodyTextBlockStyle dans HighContrast, la couleur s’inverse correctement.

L’extrait de code suivant (à partir d’un fichier App.xaml) montre un exemple de collection ThemeDictionaries dans un modèle de données ListView .

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <Style
            x:Key="SecondaryBodyTextBlockStyle"
            TargetType="TextBlock"
            BasedOn="{StaticResource BodyTextBlockStyle}">
            <Setter Property="Foreground" 
                Value="{StaticResource SystemControlForegroundBaseMediumBrush}" />
        </Style>
    </ResourceDictionary>

    <ResourceDictionary x:Key="Light">
        <Style
            x:Key="SecondaryBodyTextBlockStyle"
            TargetType="TextBlock"
            BasedOn="{StaticResource BodyTextBlockStyle}">
            <Setter Property="Foreground" 
                Value="{StaticResource SystemControlForegroundBaseMediumBrush}" />
        </Style>
    </ResourceDictionary>

    <ResourceDictionary x:Key="HighContrast">
        <!-- The Foreground Setter is omitted in HighContrast -->
        <Style
            x:Key="SecondaryBodyTextBlockStyle"
            TargetType="TextBlock"
            BasedOn="{StaticResource BodyTextBlockStyle}" />
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

<!-- Usage in your DataTemplate... -->
<DataTemplate>
    <StackPanel>
        <TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="Double line list item" />

        <!-- Note how ThemeResource is used to reference the Style -->
        <TextBlock Style="{ThemeResource SecondaryBodyTextBlockStyle}" Text="Second line of text" />
    </StackPanel>
</DataTemplate>

Exemples

Conseil

Ouvrez l’application Galerie WinUI 3 et voyez la prise en charge de l’accessibilité des contrastes de couleurs en action.

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.

Rubriques connexes

• Accessibilité
• Exemple de paramètres et de contraste d’interface utilisateur
• Exemple d’accessibilité XAML
• Exemple de contraste élevé XAML
• AccessibilitySettings