Kontrastthemen

Kontrastdesigns verwenden eine eingeschränkte Farbpalette (mit Kontrastverhältnissen in der Regel bei oder über 7:1), um die Lesbarkeit zu verbessern, visuelle Ermüdung zu verringern und Benutzer zu unterstützen, die eine hohe visuelle Trennung zwischen Vordergrund- und Hintergrundinhalten verwenden.

Zum Auswerten des App-Verhaltens unter Kontrastdesigns, aktivieren und passen Sie sie in Einstellungen > Barrierefreiheit > Kontrastdesigns an.

Festlegen von HighContrastAdjustment auf "None"

Windows Apps aktivieren HighContrastAdjustment standardmäßig. Dadurch wird weißer Vordergrundtext mit einem Hervorhebungshintergrund in Schwarz erzwungen, um den hohen Kontrast in allen Inhalten beizubehalten. Wenn Ihre App bereits richtige systembewusste Pinsel verwendet, setzen Sie dies auf Keine, damit Ihr beabsichtigter Kontrast-Themenstil übernommen wird.

Erkennen von hohem Kontrast

Sie können den Kontrastmodus programmgesteuert erkennen, indem Sie Microsoft.UI.System.ThemeSettings verwenden und die HighContrast-Eigenschaft überprüfen.

Erstellen von Themenwörterbüchern

Verwenden Sie ResourceDictionary.ThemeDictionaries, um designspezifische Ressourcen zu definieren. Auf diese Weise können Ihre App explizite Werte für Default (Dark), Light und HighContrast bereitstellen, während sie weiterhin am Wechseln des Laufzeitdesigns teilnehmen.

1. Erstellen Sie in "App.xaml" eine ThemeDictionaries-Auflistung , die mindestens die Einträge "Default " und "HighContrastResourceDictionary " enthält (für dieses Beispiel ist ein Light-Wörterbuch optional).

2. Definieren Sie in Der Standardeinstellung die benötigten Pinselressourcen , in der Regel SolidColorBrush-Einträge , die durch semantische Verwendung schlüsseliert werden.

3. Ordnen Sie in HighContrast jede Ressource einem entsprechenden dynamischen SystemColor-Wert zu. Informationen zur Kombination finden Sie unter Kontrastfarben.

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

Kontrastfarben

Auf Einstellungen > Barrierefreiheit > Kontrastthemen (siehe unten) können Benutzer eines von vier integrierten Themen auswählen: Aquatisch, Wüste, Dämmerung und Nachthimmel.

Nachdem Sie ein Design ausgewählt haben, können Benutzer es direkt anwenden oder einzelne Farben bearbeiten. Die folgende Abbildung zeigt das Dialogfeld "Bearbeiten" für "Aquatic".

In der folgenden Tabelle sind die SystemColor-Ressourcen mit Kontrastdesign und die empfohlenen Vordergrund-/Hintergrundpaare aufgeführt. Jeder SystemColor-Wert wird automatisch aktualisiert, wenn der Benutzer Designs wechselt.

Farbmuster	Beschreibung
	SystemColorWindowColor Hintergrund von Seiten, Bereichen, Popups und Fenstern. Koppeln mit SystemColorWindowTextColor
	SystemColorWindowTextColor Überschriften: Textkörper, Listen, Platzhaltertext, App- und Fensterrahmen, jedes UI-Element, mit dem keine Interaktion möglich ist. Koppeln mit SystemColorWindowColor
	SystemColorHotlightColor-Hyperlinks . Koppeln mit SystemColorWindowColor
	SystemColorGrayTextColor Inaktive oder deaktivierte Benutzeroberfläche. Koppeln mit SystemColorWindowColor
	SystemColorHighlightTextColor Vordergrundfarbe von Text oder UI, der ausgewählt, interagiert mit (darauf zeigen, gedrückt) oder in Bearbeitung ist. Koppeln mit SystemColorHighlightColor
	SystemColorHighlightColor Hintergrund- oder Akzentfarbe der ausgewählten Benutzeroberfläche. Diese bezieht sich auf die Interaktion mit der Benutzeroberfläche (darauf zeigen, gedrückt) oder wenn sie in Bearbeitung ist. Verwendet mit SystemColorHighlightTextColor
	SystemColorButtonTextColor Vordergrundfarbe von Schaltflächen und jeder Ui, mit der interagiert werden kann. Koppeln mit SystemColorButtonFaceColor
	SystemColorButtonFaceColor Hintergrundfarbe von Schaltflächen und jeder UI, mit der interagiert werden kann. In Verbindung mit SystemColorButtonTextColor

Die nächste Tabelle enthält praktische Beispiele, die SystemColorWindowColor als Hintergrundbasislinie verwenden.

Beispiel	Werte
	SystemColorWindowTextColor
	SystemColorHotlightColor
	SystemfarbeGrauerTextFarbe
	SystemColorHighlightTextColor + SystemColorHighlightColor
	SystemColorButtonTextColor + SystemColorButtonFaceColor

Der folgende Codeausschnitt zeigt, wie Sie einen Wert für BrandedPageBackgroundBrush auswählen. In diesem Fall ist SystemColorWindowColor angemessen, da die Ressource als Hintergrund auf Seitenebene verwendet wird.

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

Wenden Sie dann die Ressource auf den Hintergrund des Zielelements an.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Im vorherigen Beispiel wird zweimal verwendet {ThemeResource} : einmal zum Auflösen von SystemColorWindowColor und erneut zum Auflösen von BrandedPageBackgroundBrush. Diese zweistufige Suche ist wichtig für Laufzeitaktualisierungen von Themen. Bei dieser Einrichtung wird der Rasterhintergrund automatisch aktualisiert, wenn Benutzer in Oder zwischen Kontrastdesigns wechseln.

Bewährte Methoden

Verwenden Sie die folgenden Empfehlungen beim Anpassen von Kontrastdesignfarben in Ihrer App.

• Testen Sie Ihre App in allen vier integrierten Kontrastdesigns, während sie ausgeführt wird.
• Seien Sie konsistent.
• Legen Sie HighContrastAdjustment auf None fest, wenn die Themenressourcen richtig definiert sind. Siehe Festlegen von HighContrastAdjustment auf None.
• Farben inHighContrast nicht hartcodieren. Verwenden Sie SystemColorColor und ColorBrush Ressourcen. Siehe hartcodierte Farben.
• Kombinieren Sie keine inkompatiblen Vordergrund-/Hintergrundpaare.
• Wählen Sie nicht allein Ressourcen aufgrund der Ästhetik aus; Benutzer können Themenfarben ändern.
• Verwenden SieSystemColorGrayTextColor nicht für sekundären Textkörper oder Hinweistext. Reservieren Sie sie für deaktivierte Inhalte.
• Verwenden SieSystemColorHotlightColor nicht für etwas anderes als Hyperlinks.

Die WinUI 3 Gallery-App enthält interaktive Beispiele für WinUI-Steuerelemente und -Features. Rufen Sie die App aus dem Microsoft Store ab, oder durchsuchen Sie den Quellcode auf GitHub.

Hartcodierte Farben

Plattformsteuerelemente bieten ein integriertes Kontrast-Themenverhalten, aber Anpassungen können es problemlos beeinträchtigen. Zwei häufige Fehlermodi sind hartcodierte Farben und falsche SystemColor-Kopplungen .

Im folgenden Codeausschnitt ist ein Rasterhintergrund auf #E6E6E6 (hellgrau) hartcodiert. Dies erzwingt denselben Hintergrund für alle Designs. Bei einem Kontrastdesign wie "Aquatic" kann Vordergrundtext auf Weiß umgestellt werden, während der Hintergrund hell bleibt, was zu einem schlechten oder unbrauchbaren Kontrast führt.

<Grid Background="#E6E6E6">

Verwenden Sie stattdessen die {ThemeResource}-Markuperweiterung, um Werte aus ThemeDictionaries in einem ResourceDictionary aufzulösen. Die automatische Laufzeitersetzung wird dadurch auf Grundlage des aktiven Benutzerdesigns ermöglicht.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Ränder

Seiten, Bereiche, Popups und Leisten sollten in der Regel SystemColorWindowColor als Hintergrundbasislinie verwenden. Fügen Sie nur dort Rahmen mit reinen Kontrastthemen hinzu, wo Sie wichtige visuelle Grenzen bewahren müssen.

Wenn ein Navigationsbereich und eine Inhaltsseite dieselbe Hintergrundfarbe haben, ist häufig ein Rahmen nur für Kontrastzwecke erforderlich, um die Trennung aufrechtzuerhalten.

Listenelemente mit farbigem Text

Im Gegensatz zu kontrastierenden Designs verwenden ListView-ElementeSystemColorHighlightColor im Schwebe-, Drück- und ausgewähltem Zustand. Ein häufiger Fehler in komplexen Elementvorlagen besteht darin, dass der innere Inhalt nicht ordnungsgemäß umgekehrt wird, wodurch ausgewählte Zeilen nicht lesbar werden können.

Achten Sie darauf, TextBlock.Foreground direkt in einem DataTemplate für ListView festzulegen. ListViewItem legt "Foreground" für Zustandsübergänge fest, und geschachtelte TextBlock-Elemente sollten diesen Wert erben. Explizite Foreground Einstellungen unterbrechen diese Vererbungskette.

Sie können dies beheben, indem Sie Ressourcen für bedingten Stil in ThemeDictionaries definieren. Lassen Sie in HighContrast den expliziten Vordergrund-Setter weg, sodass die Vererbung das korrekte Inversionsverhalten wiederhergestellt.

Der folgende Codeausschnitt (aus einer App.xaml-Datei) zeigt eine Beispielsammlung von ThemeDictionaries in einer ListView-Datenvorlage.

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

Beispiele

Die WinUI 3 Gallery-App enthält interaktive Beispiele für WinUI-Steuerelemente und -Features. Rufen Sie die App aus dem Microsoft Store ab, oder durchsuchen Sie den Quellcode auf GitHub.

Zugehörige Themen

• Zugänglichkeitsübersicht
• Beispiel für UI-Kontrast und -Einstellungen (archiviertes Legacybeispiel)
• XAML-Beispiel für Barrierefreiheit (archiviertes Legacybeispiel)
• XAML Beispiel für hohen Kontrast (archiviertes Legacybeispiel)
• ThemeSettings.HighContrast