Kontrastdesigns

Kontrastdesigns verwenden eine kleine Farbpalette (mit einem Kontrastverhältnis von mindestens 7:1), um Elemente in der Benutzeroberfläche besser zu erkennen, die Augenbelastung zu reduzieren, die Lesbarkeit von Text zu verbessern und Benutzereinstellungen zu berücksichtigen.

Hinweis

Verwechseln Sie Kontrastdesigns nicht mit hellen und dunklen Designs, die eine viel größere Farbpalette unterstützen und nicht unbedingt den Kontrast erhöhen oder die Anzeige erleichtern. Weitere Informationen zu hellen und dunklen Designs finden Sie unter Farbe.

Um zu sehen, wie sich Ihre App mit Kontrastdesigns verhält, aktivieren und passen Sie sie über die Seite Einstellungen > Barrierefreiheit Kontrastdesigns > an.

Tipp

Sie können auch die linke ALT-TASTE + UMSCHALTTASTE + Druckbildschirm (PrtScn auf einigen Tastaturen) drücken, um Kontrastdesigns schnell zu aktivieren oder zu deaktivieren. Wenn Sie zuvor kein Design ausgewählt haben, wird standardmäßig das Design Aquatic verwendet (siehe folgende Abbildung).

Festlegen von HighContrastAdjustment auf None

Für Windows-Apps ist HighContrastAdjustment standardmäßig aktiviert. Dadurch wird die gesamte Textfarbe auf Weiß mit einer durchgehenden schwarzen Hervorhebung im Hintergrund festgelegt, um einen ausreichenden Kontrast vor allen Hintergründen sicherzustellen. Wenn Sie Pinsel ordnungsgemäß verwenden, sollte diese Einstellung deaktiviert werden.

Erkennen von hohem Kontrast

Sie können programmgesteuert überprüfen, ob das aktuelle Design ein Kontrastdesign ist, indem Sie die AccessibilitySettings-Klasse verwenden (Sie müssen den AccessibilitySettings-Konstruktor aus einem Bereich aufrufen, in dem die App initialisiert ist und bereits Inhalt anzeigt).

Erstellen von Designwörterbüchern

Ein ResourceDictionary.ThemeDictionaries-Objekt kann Designfarben angeben, die sich von den systemdefinierten Farben unterscheiden, indem Pinsel für die Kontrastdesigns Default (Dunkel), Hell und HighContrast angegeben werden.

Tipp

Das Kontrastdesign bezieht sich im Allgemeinen auf das Feature, während HighContrast auf das spezifische Wörterbuch verweist, auf das verwiesen wird.

1. Erstellen Sie in App.xaml eine ThemeDictionaries-Auflistung mit einem Default - und einem HighContrastResourceDictionary -Objekt (ein LightResourceDictionary ist für dieses Beispiel nicht erforderlich).

2. Erstellen Sie im Standardwörterbuch den benötigten Pinseltyp (in der Regel einen SolidColorBrush). Geben Sie ihm einen x:Key-Namen , der der beabsichtigten Verwendung entspricht (eine StaticResource , die auf einen vorhandenen Systempinsel verweist, wäre ebenfalls geeignet).

3. Geben Sie im HighContrast ResourceDictionary (im folgenden Codeausschnitt dargestellt) einen geeigneten SystemColor-Pinsel an. Ausführliche Informationen zur Auswahl einer der highContrast-Farben des dynamischen Systems für den SystemColor-Pinsel 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 der Seite Einstellungen > Erleichterte Bedienung > Kontrastdesigns (in der folgenden Abbildung dargestellt) können Benutzer aus vier Standardkontrastdesigns auswählen: Wasser, Wüste, Dämmerung und Nachthimmel.

Nachdem der Benutzer eine Option ausgewählt hat, kann er sie sofort anwenden oder das Design bearbeiten. Die folgende Abbildung zeigt das Dialogfeld Design bearbeiten für das Aquatische Kontrastdesign.

In dieser Tabelle werden die Kontrastdesignfarben und die empfohlenen Paarungen angezeigt. Jede SystemColor-Ressource ist eine Variable, die die Farbe automatisch aktualisiert, wenn der Benutzer kontrastiert.

Farbfeld	Beschreibung
	SystemColorWindowColor Hintergrund von Seiten, Bereichen, Popups und Fenstern. Koppeln mit SystemColorWindowTextColor
	SystemColorWindowTextColor Überschriften, Textkörperkopien, Listen, Platzhaltertext, App- und Fensterrahmen, alle Ui-Elemente, mit denen nicht interagiert werden kann. Koppeln mit SystemColorWindowColor
	SystemColorHotlightColor Hyperlinks. Koppeln mit SystemColorWindowColor
	SystemColorGrayTextColor Inaktive (deaktivierte) Benutzeroberfläche. Koppeln mit SystemColorWindowColor
	SystemColorHighlightTextColor Vordergrundfarbe für Text oder Benutzeroberfläche, der ausgewählt ist, mit dem sie interagiert (mit dem Mauszeiger, gedrückt) oder in Bearbeitung ist. Koppeln mit SystemColorHighlightColor
	SystemColorHighlightColor Hintergrund- oder Akzentfarbe für die Benutzeroberfläche, die ausgewählt ist, mit der interagiert (mit dem Mauszeiger, gedrückt) oder in Bearbeitung ist. Koppeln mit SystemColorHighlightTextColor
	SystemColorButtonTextColor Vordergrundfarbe für Schaltflächen und beliebige Ui-Elemente, mit denen interagiert werden kann. Koppeln mit SystemColorButtonFaceColor
	SystemColorButtonFaceColor Hintergrundfarbe für Schaltflächen und benutzeroberfläche, mit der interagiert werden kann. Koppeln mit SystemColorButtonTextColor

Die nächste Tabelle zeigt, wie die Farben angezeigt werden, wenn sie auf einem Hintergrund verwendet werden, der auf SystemColorWindowColor festgelegt ist.

Beispiel	Werte
	SystemColorWindowTextColor
	SystemColorHotlightColor
	SystemColorGrayTextColor
	SystemColorHighlightTextColor + SystemColorHighlightColor
	SystemColorButtonTextColor + SystemColorButtonFaceColor

Im folgenden Codeausschnitt wird gezeigt, wie Sie eine Ressource für BrandedPageBackgroundBrush auswählen. SystemColorWindowColor ist hier eine gute Wahl, da BrandedPageBackgroundBrush angibt, dass es für einen Hintergrund 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>

Die Ressource wird dann dem Hintergrund eines Elements zugewiesen.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Im vorherigen Beispiel wird zweimal verwendet {ThemeResource} , einmal, um auf SystemColorWindowColor und erneut auf BrandedPageBackgroundBrush zu verweisen. Beide Verweise sind erforderlich, damit zur Laufzeit das korrekte Design in Ihrer App verwendet wird. Dies ist ein guter Zeitpunkt, um die Funktionalität in Ihrer App zu testen. Der Rasterhintergrund wird automatisch aktualisiert, wenn Sie zu einem Design mit hohem Kontrast wechseln. Beim Wechseln zwischen verschiedenen Designs mit hohem Kontrast wird er ebenfalls aktualisiert.

Hinweis

WinUI 2.6 und höher

Es stehen acht Systempinsel mit hohem Kontrast für den Verweis über einen ResourceKey zur Verfügung (siehe das folgende Beispiel für SystemColorWindowTextColorBrush).

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

Die Pinselnamen stimmen genau mit einer der acht zuvor genannten Systemfarben überein (mit angefügtem "Pinsel"). Aus Leistungsgründen wird die Verwendung einer StaticResource anstelle eines lokalen SolidColorBrush empfohlen.

Bewährte Methoden

Hier finden Sie einige Empfehlungen zum Anpassen der Kontrastdesignfarben in Ihrer Windows-App.

• Testen Sie alle vier Designs mit hohem Kontrast, während Ihre App ausgeführt wird.
• Achten Sie auf Einheitlichkeit.
• Stellen Sie sicher, dass HighContrastAdjustment in Ihrer App auf None festgelegt ist (standardmäßig aktiviert). Weitere Informationen finden Sie unter Festlegen von HighContrastAdjustment auf None.
• Programmieren Sie eine Farbe im Design HighContrast nicht hart. Verwenden Sie stattdessen die Ressourcen SystemColorColor und ColorBrush . Weitere Informationen finden Sie unter Hartcodierte Farben.
• Nicht kompatible Hintergrund-/Vordergrundpaare mischen
• Wählen Sie keine Farbressource für ästhetik aus. Denken Sie daran, dass sich die Farben mit dem Design ändern.
• Verwenden SystemColorGrayTextColorSie nicht für textkörperliche Kopie, die sekundär ist oder als Hinweistext fungiert. Dies ist nur für deaktivierte Inhalte vorgesehen.
• Verwenden SieSystemColorHotlightColor nicht und den entsprechenden Pinsel, da beide für Hyperlinks reserviert sind.

Tipp

Es ist oft hilfreich, sich die WinUI-Katalog-App anzusehen, um zu sehen, wie häufige Steuerelemente die SystemColor-Pinsel verwenden. Wenn sie bereits installiert sind, öffnen Sie sie, indem Sie auf die folgenden Links klicken: WinUI 3-Katalog oder WinUI 2-Katalog.

Wenn sie nicht installiert sind, können Sie den WinUI 3-Katalog und den WinUI 2-Katalog aus dem Microsoft Store herunterladen.

Sie können auch den Quellcode für beide von GitHub abrufen (verwenden Sie denmain-Branch für WinUI 3 und den Branchwinui2 für WinUI 2).

Hartcodierte Farben

Plattformsteuerelemente bieten integrierte Unterstützung für Kontrastdesigns. Sie sollten jedoch vorsichtig sein, wenn Sie die Benutzeroberfläche Ihrer Anwendung anpassen. Zwei der häufigsten Probleme treten auf, wenn entweder die Farbe eines Elements hartcodiert ist oder eine falsche SystemColor-Ressource verwendet wird.

Im folgenden Codeausschnitt wird ein Grid-Element angezeigt, das mit einer Hintergrundfarbe deklariert ist, die auf #E6E6E6 (sehr hellgrau) festgelegt ist. Wenn Sie die Farbe auf diese Weise hartcodieren, überschreiben Sie auch die Hintergrundfarbe in allen Designs. Wenn der Benutzer beispielsweise das Design Aquatischer Kontrast anstelle von weißem Text auf einem nahe schwarzen Hintergrund auswählt, ändert sich die Textfarbe in dieser App in Weiß, während der Hintergrund hellgrau bleibt. Der sehr geringe Kontrast zwischen Text und Hintergrund könnte die Verwendung dieser App sehr erschweren.

<Grid Background="#E6E6E6">

Stattdessen wird empfohlen, die {ThemeResource}-Markuperweiterung zu verwenden, um auf eine Farbe in der ThemeDictionaries-Auflistung eines ResourceDictionary zu verweisen. Dies ermöglicht das automatische Ersetzen von Farben und Pinsel basierend auf dem aktuellen Design des Benutzers.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Rahmen

Seiten, Bereiche, Popups und Balken sollten systemColorWindowColor als Hintergrund verwenden. Fügen Sie nur bei Bedarf einen Rahmen für ein Kontrastdesign hinzu, um wichtige Grenzen auf der Benutzeroberfläche beizubehalten.

Tipp

Es wird empfohlen, 2px-Rahmen für transitorische Oberflächen wie Flyouts und Dialoge zu verwenden.

Der Navigationsbereich und die Seite haben beide die gleiche Hintergrundfarbe in Kontrastdesigns. Um sie zu unterscheiden, ist ein designbasierter Kontrastrahmen unerlässlich.

Listenelemente mit farbigem Text

Im Gegensatz zu Designs ist der Hintergrund von Elementen in einer ListView auf SystemColorHighlightColor festgelegt, wenn der Benutzer sie bewegt, drückt oder auswählt. Ein häufiges Problem mit komplexen Listenelementen tritt auf, wenn der Inhalt des Listenelements seine Farbe nicht umkehren kann, sodass die Elemente nicht gelesen werden können.

Seien Sie vorsichtig, wenn Sie TextBlock.Foreground in der DataTemplate der ListView festlegen (in der Regel zum Einrichten einer visuellen Hierarchie). Die Foreground-Eigenschaft wird für das ListViewItem festgelegt, und jeder TextBlock in der DataTemplate erbt die richtige Vordergrundfarbe . Durch festlegen des Vordergrunds wird diese Vererbung unterbrochen.

Sie können dies beheben, indem Sie den Vordergrund bedingt über einen Stil in einer ThemeDictionaries-Auflistung festlegen. Da der Vordergrund nicht von SecondaryBodyTextBlockStyle in HighContrast festgelegt wird, wird die Farbe ordnungsgemäß invertiert.

Der folgende Codeausschnitt (aus einer App.xaml-Datei) zeigt eine ThemeDictionaries-Beispielsammlung 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

Tipp

Öffnen Sie die WinUI 3-Katalog-App, und sehen Sie sich die Unterstützung der Barrierefreiheit für Den Farbkontrast in Aktion an.

Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab.

Zugehörige Themen

• Bedienungshilfen
• Beispiel für UI-Kontrast und -Einstellungen
• XAML-Beispiel für Barrierefreiheit
• XAML-Beispiel für hohen Kontrast
• AccessibilitySettings