Temi a contrasto elevatoHigh contrast themes

Windows supporta i temi a contrasto elevato per il sistema operativo e per le app che gli utenti possono scegliere di abilitare.Windows supports high contrast themes for the OS and apps that users may choose to enable. I temi a contrasto elevato usano una tavolozza ridotta di colori contrastanti che migliorano la visibilità dell'interfaccia.High contrast themes use a small palette of contrasting colors that makes the interface easier to see.

Calcolatrice con tema chiaro e tema Nero a contrasto elevato.

Calcolatrice con tema chiaro e tema Nero a contrasto elevato.Calculator shown in light theme and High Contrast Black theme.

Per passare a un tema a contrasto elevato, vai a Impostazioni > Accessibilità > Contrasto elevato.You can switch to a high contrast theme by using Settings > Ease of access > High contrast.

Nota

Non confondere i temi a contrasto elevato con i temi chiari e scuri, che offrono una tavolozza dei colori molto più estesa non considerata a contrasto elevato.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. Per altri temi chiari e scuri, vedi l'articolo sul colore.For more light and dark themes, see the article on color.

Mentre i controlli comuni offrono automaticamente il supporto del contrasto elevato, occorre fare attenzione quando si personalizza l'interfaccia utente.While common controls come with full high contrast support for free, care needs to be taken while customizing your UI. Il bug più comune relativo al contrasto elevato è causato dalla presenza di un colore hardcoded incorporato su un controllo.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}">

Quando il colore #E6E6E6 viene impostato come incorporato, la griglia manterrà quel colore di sfondo in tutti i temi.When the #E6E6E6 color is set inline in the first example, the Grid will retain that background color in all themes. Se l'utente passa al tema Nero a contrasto elevato, si aspetterà che l'app abbia uno sfondo nero.If the user switches to the High Contrast Black theme, they'll expect your app to have a black background. Poiché #E6E6E6 è quasi bianco, alcuni utenti potrebbero non riuscire a interagire con l'app.Since #E6E6E6 is almost white, some users may not be able to interact with your app.

Nel secondo esempio viene usata l' estensione di markup {ThemeResource} per fare riferimento a un colore nella raccolta ThemeDictionaries , una proprietà dedicata di un elemento 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 consente a XAML di scambiare automaticamente i colori in base al tema corrente dell'utente.ThemeDictionaries allows XAML to automatically swap colors for you based on the user's current theme.

Dizionari dei temiTheme dictionaries

Quando devi modificare un colore rispetto all'impostazione predefinita di sistema, crea una raccolta ThemeDictionaries per la tua app.When you need to change a color from its system default, create a ThemeDictionaries collection for your app.

  1. Per iniziare, crea il plumbing appropriato, se non esiste già.Start by creating the proper plumbing, if it doesn't already exist. In app. XAML creare una raccolta ThemeDictionaries , inclusi i valori predefiniti e HighContrast come minimo.In App.xaml, create a ThemeDictionaries collection, including Default and HighContrast at a minimum.
  2. Per impostazione predefinita, creare il tipo di pennello necessario, in genere un oggetto SolidColorBrush.In Default, create the type of Brush you need, usually a SolidColorBrush. Assegnargli un nome x:Key specifico per l'elemento usato.Give it a x:Key name specific to what it is being used for.
  3. Assegnare il colore desiderato.Assign the Color you want for it.
  4. Copiare il pennello in 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>

L'ultimo passaggio consiste nel determinare il colore da usare in contrasto elevato, operazione descritta nella sezione successiva.The last step is to determine what color to use in high contrast, which is covered in the next section.

Nota

HighContrast non è l'unico nome di chiave disponibile.HighContrast is not the only available key name. Sono disponibili anche HighContrastBlack, HighContrastWhitee HighContrastCustom.There's also HighContrastBlack, HighContrastWhite, and HighContrastCustom. Nella maggior parte dei casi, HighContrast è tutto quello che ti serve.In most cases, HighContrast is all you need.

A colori a contrasto elevatoHigh contrast colors

Nella pagina Impostazioni > Accessibilità > Contrasto elevato sono disponibili per impostazione predefinita 4 temi a contrasto elevato.On the Settings > Ease of access > High contrast page, there are 4 high contrast themes by default.

Impostazioni di contrasto elevato

Quando l'utente seleziona un'opzione, nella pagina viene visualizzata un'anteprima.After the user selects an option, the page shows a preview.

Risorse a contrasto elevato

È possibile fare clic su ogni campione di colore nell'anteprima per modificarne il valore. Ogni campione esegue anche il mapping direttamente a una risorsa di colore XAML.Every color swatch on the preview can be clicked to change its value. Every swatch also directly maps to an XAML color resource.

Ogni risorsa di **colore SystemColor *** è una variabile che aggiorna automaticamente il colore quando l'utente passa temi a contrasto elevato.Each SystemColor*Color resource is a variable that automatically updates color when the user switches high contrast themes. Ecco alcune linee guida su dove e quando usare ogni risorsa.Following are guidelines for where and when to use each resource.

RisorsaResource UsoUsage
SystemColorWindowTextColorSystemColorWindowTextColor Corpo, intestazioni, elenchi, testo con cui non è possibile interagireBody copy, headings, lists; any text that can't be interacted with
SystemColorHotlightColorSystemColorHotlightColor Collegamenti ipertestualiHyperlinks
SystemColorGrayTextColorSystemColorGrayTextColor Elementi di interfaccia utente disabilitatiDisabled UI
SystemColorHighlightTextColorSystemColorHighlightTextColor Colore di primo piano per elementi di interfaccia utente o testo selezionati, in corso o con cui attualmente l'utente sta interagendoForeground color for text or UI that's in progress, selected, or currently being interacted with
SystemColorHighlightColorSystemColorHighlightColor Colore di sfondo per elementi di interfaccia utente o testo selezionati, in corso o con cui attualmente l'utente sta interagendoBackground color for text or UI that's in progress, selected, or currently being interacted with
SystemColorButtonTextColorSystemColorButtonTextColor Colore di primo piano per i pulsanti; qualsiasi elemento di interfaccia utente con cui è possibile interagireForeground color for buttons; any UI that can be interacted with
SystemColorButtonFaceColorSystemColorButtonFaceColor Colore di sfondo per i pulsanti; qualsiasi elemento di interfaccia utente con cui è possibile interagireBackground color for buttons; any UI that can be interacted with
SystemColorWindowColorSystemColorWindowColor Sfondo di pagine, riquadri, popup e barreBackground of pages, panes, popups, and bars

Spesso è utile esaminare le app esistenti, il menu di avvio o i controlli comuni per vedere come altri hanno risolto problemi di progettazione a contrasto elevato simili ai tuoi.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.

Cosa fareDo

  • Quando possibile, rispettare le coppie sfondo/primo piano.Respect the background/foreground pairs where possible.
  • Testare tutti e 4 i temi a contrasto elevato con l'app in esecuzione.Test in all 4 high contrast themes while your app is running. L'utente non dovrebbe aver bisogno di riavviare l'app quando cambia tema.The user should not have to restart your app when they switch themes.
  • Mantenere la coerenza.Be consistent.

Cosa non fareDon't

  • Codice rigido un colore nel tema HighContrast ; usare le risorse di **colore SystemColor *** .Hard code a color in the HighContrast theme; use the SystemColor*Color resources.
  • Scegliere una risorsa di colore per ragioni estetiche.Choose a color resource for aesthetics. Ricorda che cambiano con il tema.Remember, they change with the theme!
  • Non usare SystemColorGrayTextColor per la copia del corpo secondaria o funge da hint.Don't use SystemColorGrayTextColor for body copy that's secondary or acts as a hint.

Per continuare l'esempio precedente, è necessario selezionare una risorsa per BrandedPageBackgroundBrush.To continue the earlier example, you need to pick a resource for BrandedPageBackgroundBrush. Poiché il nome indica che verrà usato per uno sfondo, SystemColorWindowColor è una scelta ottimale.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>

Più avanti nell'app, ora puoi impostare lo sfondo.Later in your app, you can now set the background.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Si noti come ** { ThemeResource } ** viene usato due volte, una volta per fare riferimento a SystemColorWindowColor e di nuovo per fare riferimento a BrandedPageBackgroundBrush.Note how {ThemeResource} is used twice, once to reference SystemColorWindowColor and again to reference BrandedPageBackgroundBrush. Entrambe le occorrenze sono necessarie perché l'app carichi il tema corretto in fase di esecuzione.Both are required for your app to theme correctly at run time. Questo è il momento ideale per testare le funzionalità dell'app.This is a good time to test out the functionality in your app. Lo sfondo della griglia si aggiornerà automaticamente quando si passa a un tema a contrasto elevato.The Grid's background will automatically update as you switch to a high contrast theme. Si aggiornerà anche quando si passa da un tema a contrasto elevato all'altro.It will also update when switching between different high contrast themes.

Quando usare i bordiWhen to use borders

Le pagine, i riquadri, i popup e le barre devono usare SystemColorWindowColor per lo sfondo a contrasto elevato.Pages, panes, popups, and bars should all use SystemColorWindowColor for their background in high contrast. Aggiungi un bordo esclusivamente a contrasto elevato dove necessario per preservare confini importanti all'interno dell'interfaccia utente.Add a high contrast-only border where necessary to preserve important boundaries in your UI.

Un riquadro di spostamento separato dal resto della pagina

Il riquadro di spostamento e la pagina condividono entrambi lo stesso colore di sfondo a contrasto elevato. Un bordo a contrasto elevato per suddividerli è essenziale.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.

Elencare gli elementiList items

Con un contrasto elevato, gli elementi in un controllo ListView hanno lo sfondo impostato su SystemColorHighlightColor quando vengono posizionati, premuti o selezionati.In high contrast, items in a ListView have their background set to SystemColorHighlightColor when they are hovered, pressed, or selected. Le voci degli elenchi complessi hanno spesso un bug per cui il contenuto della voce di elenco non riesce a invertire i colori al passaggio del mouse o quando la voce viene premuta o selezionata.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. Questo ne rende impossibile la lettura.This makes the item impossible to read.

Elenco semplice in tema chiaro e Nero a contrasto elevato

Elenco semplice con tema chiaro (a sinistra) e Contrasto elevato tema nero (a destra). Il secondo elemento è selezionato; Si noti come il colore del testo venga invertito a contrasto elevato.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.

Voci di elenco con testo coloratoList items with colored text

Una possibile causa del problema è l'impostazione di TextBlock.Foreground nell'oggetto DataTemplate di ListView.One culprit is setting TextBlock.Foreground in the ListView's DataTemplate. Questo viene fatto in genere per stabilire una gerarchia visiva.This is commonly done to establish visual hierarchy. La proprietà Foreground è impostata sul controllo ListViewItem e i TextBlock in DataTemplate ereditano il colore di primo piano corretto al passaggio del mouse o quando l'elemento viene premuto o selezionato.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. Tuttavia, impostare Foreground in primo piano comporta l'interruzione dell'ereditarietàHowever, setting Foreground breaks the inheritance.

Elenco complesso in tema chiaro e Nero a contrasto elevato

Elenco complesso con tema chiaro (a sinistra) e Contrasto elevato tema nero (a destra). Con un contrasto elevato, non è stato possibile invertire la seconda riga dell'elemento selezionato.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.

È possibile aggirare questo problema impostando il primo piano in modo condizionale tramite uno stile presente in una raccolta ThemeDictionaries .You can work around this by setting Foreground conditionally via a Style that's in a ThemeDictionaries collection. Poiché il primo piano non è impostato da SecondaryBodyTextBlockStyle in HighContrast, il colore viene invertito correttamente.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>

Rilevamento del contrasto elevatoDetecting high contrast

È possibile verificare a livello di codice se il tema corrente è un tema a contrasto elevato usando i membri della classe AccessibilitySettings .You can programmatically check if the current theme is a high contrast theme by using members of the AccessibilitySettings class.

Nota

Verifica che il costruttore AccessibilitySettings venga chiamato da un ambito in cui l'app viene inizializzata e visualizza già i contenuti.Make sure you call the AccessibilitySettings constructor from a scope where the app is initialized and is already displaying content.