ハイ コントラスト テーマHigh contrast themes

Windows では、OS やアプリでハイ コントラスト テーマがサポートされていて、必要に応じて有効にすることができます。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. ユーザーが黒のハイ コントラスト テーマに切り替えたら、彼らはアプリの背景が黒で表示されることを期待します。If the user switches to the High Contrast Black theme, they'll expect your app to have a black background. #E6E6E6 はほぼ白一色であるため、ユーザーによってはアプリを操作できない場合があります。Since #E6E6E6 is almost white, some users may not be able to interact with your app.

2 番目の例では、ResourceDictionary 要素の専用プロパティである ThemeDictionaries コレクション内の色を参照するために {ThemeResource} マークアップ拡張を使っています。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

システムの既定の色を変更する必要がある場合は、アプリの 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 で、少なくとも DefaultHighContrast を含む ThemeDictionaries コレクションを作成します。In 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. 必要な Color を割り当てます。Assign the Color you want for it.
  4. この BrushHighContrast にコピーします。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.

注意

HighContrast のみが、利用可能なキー名というわけではありません。HighContrast is not the only available key name. HighContrastBlackHighContrastWhiteHighContrastCustom も利用可能なキー名です。There's also HighContrastBlack, HighContrastWhite, and HighContrastCustom. ほとんどの場合、HighContrast が必要になります。In 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 ボタンなど、操作可能な UI の前景色Foreground color for buttons; any UI that can be interacted with
SystemColorButtonFaceColorSystemColorButtonFaceColor ボタンなど、操作可能な UI の背景色Background color for buttons; any UI that can be interacted with
SystemColorWindowColorSystemColorWindowColor ページ、ウィンドウ、ポップアップ、およびバーの背景Background of pages, panes, popups, and bars

既存のアプリ、スタート画面、またはコモン コントロールを確認すると、ハイ コントラストのデザインの参考になります。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.
  • アプリの実行中に、4 つのハイ コントラスト テーマをすべてテストします。Test in all 4 high contrast themes while your app is running. ユーザーがテーマを切り替えたときに、アプリを再起動しなくても良いようにします。The user should not have to restart your app when they switch themes.
  • 一貫性を保ちます。Be consistent.

できませんDon't

  • SystemColor*Color リソースを使って HighContrast テーマの色をハードコーディングしないようにします。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>

その後、アプリで背景を設定できます。Later in your app, you can now set the background.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

注方法 {ThemeResource} 2 回使用の参照を 1 回SystemColorWindowColorと参照 をもう一度BrandedPageBackgroundBrush.Note how {ThemeResource} is used twice, once to reference SystemColorWindowColor and again to reference BrandedPageBackgroundBrush. 実行時に正しいテーマを使うためには、両方の参照がアプリに必要です。Both are required for your app to theme correctly at run time. ここで、アプリでハイ コントラストの機能をテストすると良いでしょう。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 の項目の背景が SystemColorHighlightColor に設定されます。In 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.

単色テーマと黒のハイ コントラスト テーマの簡単なリスト

ライト テーマの (左) と (右) ハイコントラスト黒のテーマでの単純なリスト。2 番目の項目が選択されています。ハイ コントラストでそのテキストの色を反転する方法に注意してください。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

問題の原因の 1 つが、ListView の DataTemplate で TextBlock.Foreground を設定することです。One culprit is setting TextBlock.Foreground in the ListView's DataTemplate. TextBlock.Foreground は一般的に、視覚的な階層を確立するために設定します。This is commonly done to establish visual hierarchy. Foreground プロパティは ListViewItem で設定され、DataTemplate 内の TextBlock は、項目がポイント、押下、または選択されたときに適切な 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.

淡色テーマと黒のハイ コントラスト テーマの複雑なリスト

ライト テーマの (左) とハイコントラスト黒のテーマ (右) で複雑な一覧です。ハイ コントラストなどで選択した項目の 2 行目は反転できませんでした。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 コレクションに含まれている Style を使って、条件付きで Foreground を設定します。You can work around this by setting Foreground conditionally via a Style that's in a ThemeDictionaries collection. Foreground が、HighContrastSecondaryBodyTextBlockStyle によって設定されていないため、色が正しく反転します。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.

注意

アプリが初期化され、既にコンテンツが表示されているスコープから AccessibilitySettings コンストラクターを呼び出すようにします。Make sure you call the AccessibilitySettings constructor from a scope where the app is initialized and is already displaying content.