Thèmes à contraste élevéHigh contrast themes

Windows prend en charge les thèmes à contraste élevé pour les systèmes d’exploitation et les applications que les utilisateurs peuvent être amenés à activer.Windows supports high contrast themes for the OS and apps that users may choose to enable. Les thèmes à contraste élevé utilisent une petite palette de couleurs contrastées qui facilitent l’affichage de l’interface.High contrast themes use a small palette of contrasting colors that makes the interface easier to see.

Calculatrice représentée en thème clair et en thème noir à contraste élevé

Calculatrice représentée en thème clair et en thème noir à contraste élevéCalculator shown in light theme and High Contrast Black theme.

Pour basculer sur un thème à contraste élevé, accédez à Paramètres > Options d’ergonomie > Contraste élevé.You can switch to a high contrast theme by using Settings > Ease of access > High contrast.

Notes

Ne confondez pas les thèmes à contraste élevé avec les thèmes Ombre et lumière, qui prennent en charge une palette de couleurs plus large, sans contraste élevé.Don't confuse high contrast themes with light and dark themes, which allow a much larger color palette that isn't considered to have high contrast. Pour plus d’informations sur les thèmes Ombre et lumière, consultez l’article sur la couleur.For more light and dark themes, see the article on color.

Les contrôles communs sont pourvus d’une prise en charge gratuite complète du contraste élevé, mais nous vous recommandons de faire preuve de prudence lors de la personnalisation de votre interface utilisateur.While common controls come with full high contrast support for free, care needs to be taken while customizing your UI. Le bogue le plus courant lié au contraste élevé est provoqué par le codage en dur d’une couleur sur un contrôle inclus.The most common high contrast bug is caused by hard-coding a color on a control inline.

<!-- Don't do this! -->
<Grid Background="#E6E6E6">

<!-- Instead, create BrandedPageBackgroundBrush and do this. -->
<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Lorsque la couleur #E6E6E6 est incluse dans le premier exemple, la Grille conserve la couleur d’arrière-plan dans l’ensemble des thèmes.When the #E6E6E6 color is set inline in the first example, the Grid will retain that background color in all themes. Si l’utilisateur bascule sur le thème noir à contraste élevé, il souhaitera disposer d’un arrière-plan noir sur votre application.If the user switches to the High Contrast Black theme, they'll expect your app to have a black background. Dans la mesure où #E6E6E6 est presque blanc, certains utilisateurs peuvent ne pas pouvoir interagir avec votre application.Since #E6E6E6 is almost white, some users may not be able to interact with your app.

Dans le second exemple, l’extension de balisage {ThemeResource} est utilisée pour référencer une couleur dans la collection ThemeDictionaries, une propriété dédiée d’un élément ResourceDictionary.In the second example, the {ThemeResource} markup extension is used to reference a color in the ThemeDictionaries collection, a dedicated property of a ResourceDictionary element. ThemeDictionaries permet à XAML de permuter automatiquement les couleurs en fonction du thème actuel de l’utilisateur.ThemeDictionaries allows XAML to automatically swap colors for you based on the user's current theme.

Dictionnaires de thèmeTheme dictionaries

Lorsque vous devez modifier la couleur par défaut du système, créez une collection ThemeDictionaries pour votre application.When you need to change a color from its system default, create a ThemeDictionaries collection for your app.

  1. Commencez par créer le système approprié, le cas échéant.Start by creating the proper plumbing, if it doesn't already exist. Dans App. xaml, créez une collection ThemeDictionaries , y compris la valeur par défaut et le contraste minimal.In App.xaml, create a ThemeDictionaries collection, including Default and HighContrast at a minimum.
  2. Dans default, créez le type de pinceau dont vous avez besoin, généralement un SolidColorBrush.In Default, create the type of Brush you need, usually a SolidColorBrush. Donnez-lui un nom de x :Key spécifique à ce qui est utilisé pour.Give it a x:Key name specific to what it is being used for.
  3. Affectez la couleur de votre choix.Assign the Color you want for it.
  4. Copiez ce pinceau dans le contraste HighContrast.Copy that Brush into HighContrast.
<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="#E6E6E6" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>

La dernière étape, décrite dans la section suivante, consiste à identifier la couleur à utiliser dans le contraste élevé.The last step is to determine what color to use in high contrast, which is covered in the next section.

Notes

HighContrast n’est pas le seul nom de clé disponible.HighContrast is not the only available key name. Il y a également HighContrastBlack, HighContrastWhiteet HighContrastCustom.There's also HighContrastBlack, HighContrastWhite, and HighContrastCustom. Dans la plupart des cas, le contraste élevé est tout ce dont vous avez besoin.In most cases, HighContrast is all you need.

Couleurs à contraste élevéHigh contrast colors

La page Paramètres > Options d’ergonomie > Contraste élevé comporte 4 thèmes à contraste élevé par défaut.On the Settings > Ease of access > High contrast page, there are 4 high contrast themes by default.

Paramètres de contraste élevé

Lorsque l’utilisateur sélectionne une option, la page affiche un aperçu.After the user selects an option, the page shows a preview.

Ressources de contraste élevé

Vous pouvez cliquer sur chaque échantillon de couleur de l’Aperçu pour modifier sa valeur. Chaque nuance est également directement mappée à une ressource de couleur XAML.Every color swatch on the preview can be clicked to change its value. Every swatch also directly maps to an XAML color resource.

Chaque ressource de **couleur SystemColor *** est une variable qui met à jour automatiquement la couleur lorsque l’utilisateur bascule les thèmes à contraste élevé.Each SystemColor*Color resource is a variable that automatically updates color when the user switches high contrast themes. Vous trouverez ci-après des recommandations vous indiquant quand et où utiliser chaque ressource.Following are guidelines for where and when to use each resource.

RessourceResource UsageUsage
SystemColorWindowTextColorSystemColorWindowTextColor Copie de texte de corps, titres, listes ; tout texte ne pouvant faire l’objet d’aucune interactionBody copy, headings, lists; any text that can't be interacted with
SystemColorHotlightColorSystemColorHotlightColor Liens hypertexteHyperlinks
SystemColorGrayTextColorSystemColorGrayTextColor Interface utilisateur désactivéeDisabled UI
SystemColorHighlightTextColorSystemColorHighlightTextColor Couleur de premier plan pour le texte ou l’interface utilisateur activés, sélectionnés ou faisant l’objet d’une interactionForeground color for text or UI that's in progress, selected, or currently being interacted with
SystemColorHighlightColorSystemColorHighlightColor Couleur d’arrière-plan pour le texte ou l’interface utilisateur activés, sélectionnés ou faisant l’objet d’une interactionBackground color for text or UI that's in progress, selected, or currently being interacted with
SystemColorButtonTextColorSystemColorButtonTextColor Couleur de premier plan des boutons ; toute interface utilisateur ne pouvant faire l’objet d’aucune interactionForeground color for buttons; any UI that can be interacted with
SystemColorButtonFaceColorSystemColorButtonFaceColor Couleur d’arrière-plan des boutons ; toute interface utilisateur ne pouvant faire l’objet d’aucune interactionBackground color for buttons; any UI that can be interacted with
SystemColorWindowColorSystemColorWindowColor Arrière-plan des pages, des volets, des fenêtres contextuelles et des barresBackground of pages, panes, popups, and bars

Il est souvent utile d’examiner les applications, menus Démarrer ou contrôles communs existants afin de savoir comment d’autres utilisateurs ont résolu des problèmes de conception de contraste élevé similaire au vôtre.It's often helpful to look to existing apps, Start, or the common controls to see how others have solved high contrast design problems that are similar to your own.

À faireDo

  • Respectez les paires premier plan/arrière-plan autant que possible.Respect the background/foreground pairs where possible.
  • Testez l’ensemble des 4 thèmes à contraste élevé pendant l’exécution de votre application.Test in all 4 high contrast themes while your app is running. Lorsqu’il change de thème, l’utilisateur ne devrait pas avoir à redémarrer votre application.The user should not have to restart your app when they switch themes.
  • Soyez cohérent.Be consistent.

À ne pas faireDon't

  • Coder en dur une couleur dans le thème HighContrast ; Utilisez les ressources de **couleur SystemColor *** .Hard code a color in the HighContrast theme; use the SystemColor*Color resources.
  • Choisissez une ressource de couleur à des fins esthétiques.Choose a color resource for aesthetics. N’oubliez pas que la couleur change avec le thème !Remember, they change with the theme!
  • N’utilisez pas SystemColorGrayTextColor pour la copie de corps qui est secondaire ou qui agit comme un indicateur.Don't use SystemColorGrayTextColor for body copy that's secondary or acts as a hint.

Pour continuer l’exemple précédent, vous devez choisir une ressource pour BrandedPageBackgroundBrush.To continue the earlier example, you need to pick a resource for BrandedPageBackgroundBrush. Étant donné que le nom indique qu’il sera utilisé pour un arrière-plan, SystemColorWindowColor est un bon choix.Because the name indicates that it will be used for a background, SystemColorWindowColor is a good choice.

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

Plus loin dans votre application,vous pouvez désormais définir l’arrière-plan.Later in your app, you can now set the background.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Notez la manière dont ** { ThemeResource } ** est utilisé deux fois, une fois pour référencer SystemColorWindowColor et à nouveau pour référencer BrandedPageBackgroundBrush.Note how {ThemeResource} is used twice, once to reference SystemColorWindowColor and again to reference BrandedPageBackgroundBrush. Les deux instances sont nécessaires pour la bonne définition du thème lors de l’exécution.Both are required for your app to theme correctly at run time. Il s’agit d’un bon moment pour tester la fonctionnalité dans votre application.This is a good time to test out the functionality in your app. L’arrière-plan de la grille est automatiquement mis à jour lorsque vous définissez un thème à contraste élevé.The Grid's background will automatically update as you switch to a high contrast theme. Il est également mis à jour lorsque vous basculez entre deux thèmes à contraste élevé différents.It will also update when switching between different high contrast themes.

Quand utiliser les borduresWhen to use borders

Les pages, les volets, les menus contextuels et les barres doivent tous utiliser SystemColorWindowColor pour l’arrière-plan du contraste élevé.Pages, panes, popups, and bars should all use SystemColorWindowColor for their background in high contrast. Si nécessaire, ajoutez une bordure à contraste élevé uniquement afin de préserver les bordures importantes au sein de votre interface utilisateur.Add a high contrast-only border where necessary to preserve important boundaries in your UI.

Volet de navigation séparé du reste de la page

Le volet de navigation et la page partagent la même couleur d’arrière-plan dans un contraste élevé. Une bordure à contraste élevé uniquement pour les diviser est essentielle.The navigation pane and the page both share the same background color in high contrast. A high contrast-only border to divide them is essential.

Éléments de listeList items

Dans un contraste élevé, les éléments d’un ListView ont leur arrière-plan défini sur SystemColorHighlightColor lorsqu’ils sont survolés, appuyés ou sélectionnés.In high contrast, items in a ListView have their background set to SystemColorHighlightColor when they are hovered, pressed, or selected. Les éléments de liste complexes présentent régulièrement un bogue, durant lequel la couleur du contenu de l’élément de liste ne peut pas être inversée lorsque ce dernier est survolé, activé ou sélectionné.Complex list items commonly have a bug where the content of the list item fails to invert its color when the item is hovered, pressed, or selected. Cela rend impossible sa lecture.This makes the item impossible to read.

Liste simple en thème clair et en thème noir à contraste élevé

Liste simple dans le thème clair (à gauche) et contraste élevé thème noir (à droite). Le deuxième élément est sélectionné. Notez comment la couleur de texte est inversée en contraste élevé.A simple list in light theme (left) and High Contrast Black theme (right). The second item is selected; note how its text color is inverted in high contrast.

Éléments de liste avec du texte coloréList items with colored text

Un coupable définit TextBlock.Foreground dans l’instance DataTemplate.de ListView.One culprit is setting TextBlock.Foreground in the ListView's DataTemplate. Cette procédure est généralement effectuée dans le cadre de l’établissement de la hiérarchie visuelle.This is commonly done to establish visual hierarchy. La propriété Foreground est définie sur ListViewItem, tandis que TextBlocks dans DataTemplate hérite de la couleur appropriée d’arrière-plan lorsque l’élément est survolé, activé ou sélectionné.The Foreground property is set on the ListViewItem, and TextBlocks in the DataTemplate inherit the correct Foreground color when the item is hovered, pressed, or selected. Toutefois, la définition de Foreground rompt l’héritage.However, setting Foreground breaks the inheritance.

Liste complexe en thème clair et en thème noir à contraste élevé

Liste complexe dans le thème clair (à gauche) et contraste élevé thème noir (à droite). Dans un contraste élevé, la deuxième ligne de l’élément sélectionné n’a pas pu être inversée.Complex list in light theme (left) and High Contrast Black theme (right). In high contrast, the second line of the selected item failed to invert.

Vous pouvez contourner ce problème en définissant le premier plan de façon conditionnelle via un style qui se trouve dans une collection ThemeDictionaries .You can work around this by setting Foreground conditionally via a Style that's in a ThemeDictionaries collection. Étant donné que le premier plan n’est pas défini par SecondaryBodyTextBlockStyle dans HighContrast, sa couleur est correctement inversée.Because the Foreground is not set by SecondaryBodyTextBlockStyle in HighContrast, its color will correctly invert.

<!-- In App.xaml... -->
<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>

Détection du contraste élevéDetecting high contrast

Vous pouvez vérifier par programmation si le thème actuel est un thème à contraste élevé à l’aide des membres de la classe AccessibilitySettings .You can programmatically check if the current theme is a high contrast theme by using members of the AccessibilitySettings class.

Notes

Prenez soin d’appeler le constructeur AccessibilitySettings à partir d’une étendue dans laquelle l’application est initialisée et affiche déjà du contenu.Make sure you call the AccessibilitySettings constructor from a scope where the app is initialized and is already displaying content.