Высококонтрастные темыHigh contrast themes

Windows поддерживает темы с высокой контрастностью для операционной системы и приложений, которые пользователи могут включить.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.

Стандартные элементы управления предоставляются с полной бесплатной поддержкой высокой контрастности, а вот при пользовательской настройке интерфейса следует проявлять осторожность.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.

Во втором примере расширение разметки {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. Семедиктионариес позволяет 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 создайте коллекцию семедиктионариес , включая по крайней мере по умолчанию и HighContrast .In App.xaml, create a ThemeDictionaries collection, including Default and HighContrast at a minimum.
  2. В по умолчаниюсоздайте необходимый тип кисти , обычно это 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. Скопируйте этот инструмент 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.

Примечание

HighContrast не является единственным доступным именем ключа.HighContrast is not the only available key name. Есть также хигхконтрастблакк, хигхконтраствхитеи хигхконтрасткустом.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 Отключенный пользовательский интерфейсDisabled UI
SystemColorHighlightTextColorSystemColorHighlightTextColor Основной цвет текста или элементов пользовательского интерфейса, которые в настоящее время выполняются, выбраны или участвуют во взаимодействииForeground color for text or UI that's in progress, selected, or currently being interacted with
SystemColorHighlightColorSystemColorHighlightColor Фоновый цвет текста или элементов пользовательского интерфейса, которые в настоящее время выполняются, выбраны или участвуют во взаимодействииBackground color for text or UI that's in progress, selected, or currently being interacted with
SystemColorButtonTextColorSystemColorButtonTextColor Основной цвет кнопок и любых элементов пользовательского интерфейса, с которыми можно осуществлять взаимодействиеForeground color for buttons; any UI that can be interacted with
SystemColorButtonFaceColorSystemColorButtonFaceColor Фоновый цвет кнопок и любых элементов пользовательского интерфейса, с которыми можно осуществлять взаимодействие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

  • Выполнять жесткое кодирование цвета в теме 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>

Теперь можно задать фон в приложении.Later in your app, you can now set the background.

<Grid Background="{ThemeResource 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. Чтобы сохранить важные границы в пользовательском интерфейсе, при необходимости можно добавить границу высокой контрастности.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.

Простой список в светлой теме и черной теме высокой контрастности

Простой список в светлой теме (слева) и высокая контрастность Черная тема (справа). Второй элемент выбран; Обратите внимание, что цвет текста инвертирован при высокой контрастности.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

Одно из затруднений — настройка параметра TextBlock.Foreground в элементе DataTemplate представления списка.One culprit is setting TextBlock.Foreground in the ListView's DataTemplate. Это обычно делается, чтобы установить визуальную иерархию.This is commonly done to establish visual hierarchy. Свойство Foreground настраивается в элементе ListViewItem, а элемент TextBlocks в шаблоне DataTemplate наследует правильный цвет фона при наведении на элемент, нажатии или выборе элемента.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.

Чтобы решить эту проблему, можно условно настроить параметр Foreground в элементе Style, который находится в коллекции ThemeDictionaries.You can work around this by setting Foreground conditionally via a Style that's in a ThemeDictionaries collection. Поскольку параметр Foreground не настраивается элементом SecondaryBodyTextBlockStyle из коллекции HighContrast, его цвет будет меняться правильно.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.