高對比佈景主題High contrast themes

Windows 支援使用者可選擇啟用的作業系統和 App 高對比佈景主題。Windows supports high contrast themes for the OS and apps that users may choose to enable. 高對比佈景主題使用色彩種類少的對比色,讓介面更容易分辨。High contrast themes use a small palette of contrasting colors that makes the interface easier to see.

淺色佈景主題和「黑底白字」佈景主題中的「小算盤」。

淺色佈景主題和「黑底白字」佈景主題中的「小算盤」。Calculator shown in light theme and High Contrast Black theme.

您可以使用 [設定] > [輕鬆存取] > [高對比]**,切換成高對比佈景主題。You can switch to a high contrast theme by using Settings > Ease of access > High contrast.

注意

請留意,高對比佈景主題與淺色和深色佈景主題不同,後兩者使用較多種色彩,且不一定是高對比。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. 如需淺色和深色佈景主題的詳細資訊,請參閱關於色彩的文章。For more light and dark themes, see the article on color.

雖然常用控制項都免費支援完整的高對比,但自訂 UI 時還是需要注意。While common controls come with full high contrast support for free, care needs to be taken while customizing your UI. 造成高對比錯誤的最常見原因,是以內嵌和硬式編碼方式在控制項上設定色彩。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}">

在第一個範例中以內嵌方式設定色彩 #E6E6E6 時,該格線在所有佈景主題中都會保持該背景色彩。When the #E6E6E6 color is set inline in the first example, the Grid will retain that background color in all themes. 如果使用者切換成「黑底白字」佈景主題,他們會預期 App 具有黑色背景。If the user switches to the High Contrast Black theme, they'll expect your app to have a black background. 由於 #E6E6E6 很接近白色,某些使用者可能會無法與您的 App 互動。Since #E6E6E6 is almost white, some users may not be able to interact with your app.

在第二個範例中,{ThemeResource} 標記延伸是用來參考 ThemeDictionaries 集合 (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 可讓 XAML 根據使用者目前的主題自動交換色彩。ThemeDictionaries allows XAML to automatically swap colors for you based on the user's current theme.

佈景主題字典Theme dictionaries

當您需要變更系統預設色彩時,請針對您的 App 建立 ThemeDictionaries 集合。When you need to change a color from its system default, create a ThemeDictionaries collection for your app.

  1. 由建立適當的配置開始 (如果尚未存在)。Start by creating the proper plumbing, if it doesn't already exist. 在 app.xaml 中,建立 ThemeDictionaries 集合,其中至少包含 預設systeminformation.highcontrastIn App.xaml, create a ThemeDictionaries collection, including Default and HighContrast at a minimum.
  2. Default 中,建立您需要的 Brush 類型 (通常是 SolidColorBrush)。In Default, create the type of Brush you need, usually a SolidColorBrush. 針對它的用途來指定 x:Key 名稱。Give it a x:Key name specific to what it is being used for.
  3. 指派您想要的色彩Assign the Color you want for it.
  4. 將該 Brush 標記複製到 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>

最後步驟是決定要在高對比中使用的色彩,下一個章節中會說明。The last step is to determine what color to use in high contrast, which is covered in the next section.

注意

Systeminformation.highcontrast 不是唯一可用的索引鍵名稱。HighContrast is not the only available key name. 另外還有 HighContrastBlackHighContrastWhiteHighContrastCustomThere's also HighContrastBlack, HighContrastWhite, and HighContrastCustom. 在大部分的情況下,您只需要 systeminformation.highcontrastIn most cases, HighContrast is all you need.

高對比色彩High contrast colors

[設定] > [輕鬆存取] > [高對比] 頁面中,有 4 個預設的高對比佈景主題。On the Settings > Ease of access > High contrast page, there are 4 high contrast themes by default.

高對比設定

在使用者選取一個選項之後,頁面就會顯示預覽。After the user selects an option, the page shows a preview.

高對比資源

您可以按一下預覽上的每個色板來變更其值。每個樣本也會直接對應至 XAML 色彩資源。Every color swatch on the preview can be clicked to change its value. Every swatch also directly maps to an XAML color resource.

每個 SystemColor*Color 資源都是變數,當使用者切換高對比佈景主題時會自動更新色彩。Each SystemColor*Color resource is a variable that automatically updates color when the user switches high contrast themes. 以下是在何處及何時使用各項資源的指導方針。Following are guidelines for where and when to use each resource.

資源Resource 使用方式Usage
SystemColorWindowTextColorSystemColorWindowTextColor 內文文字、標題、清單;任何無法進行互動的文字Body copy, headings, lists; any text that can't be interacted with
SystemColorHotlightColorSystemColorHotlightColor 超連結Hyperlinks
SystemColorGrayTextColorSystemColorGrayTextColor 停用的 UIDisabled UI
SystemColorHighlightTextColorSystemColorHighlightTextColor 狀態是處理中、已選取,或目前正在互動之文字或 UI 的前景色彩Foreground color for text or UI that's in progress, selected, or currently being interacted with
SystemColorHighlightColorSystemColorHighlightColor 狀態是處理中、已選取,或目前正在互動之文字或 UI 的背景色彩Background color for text or UI that's in progress, selected, or currently being interacted with
SystemColorButtonTextColorSystemColorButtonTextColor 按鈕的前景色彩;可以進行互動的任何 UIForeground color for buttons; any UI that can be interacted with
SystemColorButtonFaceColorSystemColorButtonFaceColor 按鈕的背景色彩;可以進行互動的任何 UIBackground color for buttons; any UI that can be interacted with
SystemColorWindowColorSystemColorWindowColor 頁面、窗格、快顯視窗,以及列的背景Background of pages, panes, popups, and bars

查看現有的 App、[開始],或常用控制項通常很有幫助,可以了解其他人如何解決類似的高對比設計問題。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.

建議事項Do

  • 盡可能遵守前景/背景組合。Respect the background/foreground pairs where possible.
  • 在您的 App 執行時,測試全部 4 種高對比佈景主題。Test in all 4 high contrast themes while your app is running. 使用者切換佈景主題時,應不需要重新啟動您的 App。The user should not have to restart your app when they switch themes.
  • 保持一致。Be consistent.

禁止事項Don't

  • HighContrast 佈景主題中以硬式編碼設定色彩;請使用 SystemColor*Color 資源。Hard code a color in the HighContrast theme; use the SystemColor*Color resources.
  • 依照美學來選擇色彩資源。Choose a color resource for aesthetics. 請記住,色彩會隨佈景主題變更!Remember, they change with the theme!
  • 請勿將 SystemColorGrayTextColor 用於本文文字,它應用於次要文字或當作提示。Don't use SystemColorGrayTextColor for body copy that's secondary or acts as a hint.

若要繼續先前的範例,您需要挑選 BrandedPageBackgroundBrush 的資源。To continue the earlier example, you need to pick a resource for BrandedPageBackgroundBrush. 因為該名稱指出它會用於背景,所以 SystemColorWindowColor 是不錯的選擇。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>

稍後您可以在您的 App 中設定背景。Later in your app, you can now set the background.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

請注意** { ThemeResource } 的使用方式有兩次,一次是參考SystemColorWindowColor** ,然後再重新參考BrandedPageBackgroundBrushNote how {ThemeResource} is used twice, once to reference SystemColorWindowColor and again to reference BrandedPageBackgroundBrush. 兩次都是為了讓您的 App 在執行階段能正確設定佈景主題。Both are required for your app to theme correctly at run time. 現在是測試您 App 內功能的好時機。This is a good time to test out the functionality in your app. 當您切換成高對比佈景主題時,格線的背景將會自動更新。The Grid's background will automatically update as you switch to a high contrast theme. 在不同的高對比佈景主題之間切換時,它也會更新。It will also update when switching between different high contrast themes.

使用框線的時機When to use borders

在高對比佈景主題中,頁面、窗格、快顯視窗和列,都應使用 SystemColorWindowColor 做為其背景。Pages, panes, popups, and bars should all use SystemColorWindowColor for their background in high contrast. 如需保留您 UI 中的重要框線,請新增高對比專用的框線。Add a high contrast-only border where necessary to preserve important boundaries in your UI.

與頁面的其餘部分劃分的瀏覽窗格

流覽窗格和頁面都會以高對比共用相同的背景色彩。以高對比區分的框線是不可或缺的。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.

清單項目List items

在高對比佈景主題中,當游標暫留、按下或選取 ListView 中的項目時,其背景會設為 SystemColorHighlightColorIn high contrast, items in a ListView have their background set to SystemColorHighlightColor when they are hovered, pressed, or selected. 複雜的清單項目通常會有一種錯誤,就是當游標暫留、按下或選取清單項目時,沒有反轉其內容的色彩。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. 這會使該項目難以閱讀。This makes the item impossible to read.

淺色佈景主題和「黑底白字」佈景主題中的簡易清單

淺色主題中的簡單列表 (左) 和高對比黑色主題 (右) 。第二個專案已選取;請注意其文字色彩在高對比中如何反轉。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.

包含文字色彩的清單項目List items with colored text

問題的其中一個癥結是在 ListView 的 DataTemplate 中設定 TextBlock.Foreground。One culprit is setting TextBlock.Foreground in the ListView's DataTemplate. 這通常是用來建立視覺階層。This is commonly done to establish visual hierarchy. Foreground 屬性是在 ListViewItem 上設定,而在游標暫留、按下或選取項目時,DataTemplate 中的 TextBlocks 會繼承正確的 Foreground 色彩。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. 不過,設定 Foreground 會中斷繼承。However, setting Foreground breaks the inheritance.

淺色佈景主題和「黑底白字」佈景主題中的複雜清單

淺色主題中的複雜清單 (左) 和高對比黑色主題 (右邊) 。在高對比中,選取專案的第二行無法反轉。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.

您可以透過 ThemeDictionaries 集合中的樣式,以條件方式設定前景來解決此問題。You can work around this by setting Foreground conditionally via a Style that's in a ThemeDictionaries collection. 因為 HighContrast 中的 Foreground 不是由 SecondaryBodyTextBlockStyle 來設定,所以它的顏色將會正確反轉。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>

偵測高對比Detecting high contrast

您可使用 AccessibilitySettings 類別的成員,以程式設計的方式檢查目前的佈景主題是否為高對比。You can programmatically check if the current theme is a high contrast theme by using members of the AccessibilitySettings class.

注意

請確定您是從 App 已經初始化且已經顯示內容的範圍內呼叫 AccessibilitySettings 建構函式。Make sure you call the AccessibilitySettings constructor from a scope where the app is initialized and is already displaying content.