Tema de contraste altoHigh contrast themes

Windows admite temas de contraste alto para el sistema operativo y las aplicaciones que los usuarios pueden elegir habilitar.Windows supports high contrast themes for the OS and apps that users may choose to enable. Los temas de contraste alto usan una pequeña paleta de colores de contraste que facilita la visualización de la interfaz.High contrast themes use a small palette of contrasting colors that makes the interface easier to see.

Calculadora con el tema claro y el tema Negro en contraste alto.

Calculadora con el tema claro y el tema Negro en contraste alto.Calculator shown in light theme and High Contrast Black theme.

Puedes cambiar a un tema de contraste alto desde Configuración > Accesibilidad > Contraste alto.You can switch to a high contrast theme by using Settings > Ease of access > High contrast.

Nota

No confundas los temas de contraste alto con temas claros y oscuros, que permiten una paleta de colores mucho más amplia que no se considera de contraste alto.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. Para obtener más temas claros y oscuros, consulta el artículo sobre el color.For more light and dark themes, see the article on color.

Aunque los controles comunes ofrecen total compatibilidad con el contraste alto de forma gratuita, es necesario prestar atención al personalizar la interfaz de usuario.While common controls come with full high contrast support for free, care needs to be taken while customizing your UI. El error más común en relación con el contraste alto lo causa la codificación de forma rígida de un color en un control alineado.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}">

Si el color #E6E6E6 se establece alineado en el primer ejemplo, el objeto Grid conservará ese color de fondo en todos los temas.When the #E6E6E6 color is set inline in the first example, the Grid will retain that background color in all themes. Si el usuario cambia al tema Negro en contraste alto, se esperará que tu aplicación tenga un fondo negro.If the user switches to the High Contrast Black theme, they'll expect your app to have a black background. Dado que #E6E6E6 es casi blanco, es posible que algunos usuarios no puedan interactuar con la aplicación.Since #E6E6E6 is almost white, some users may not be able to interact with your app.

En el segundo ejemplo, la extensión de marcado {ThemeResource} se usa para hacer referencia a un color de la colección ThemeDictionaries, una propiedad dedicada de un elemento 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 permite que XAML intercambie automáticamente los colores en función del tema actual del usuario.ThemeDictionaries allows XAML to automatically swap colors for you based on the user's current theme.

Diccionarios de temasTheme dictionaries

Si necesitas cambiar un color de su valor predeterminado del sistema, crea una colección ThemeDictionaries para tu aplicación.When you need to change a color from its system default, create a ThemeDictionaries collection for your app.

  1. Comienza con la creación de las asociaciones adecuadas, si aún no existen.Start by creating the proper plumbing, if it doesn't already exist. En App. XAML, cree una colección de ThemeDictionaries , que incluya default y HighContrast como mínimo.In App.xaml, create a ThemeDictionaries collection, including Default and HighContrast at a minimum.
  2. En Default, crea el tipo de Brush que necesites, normalmente un SolidColorBrush.In Default, create the type of Brush you need, usually a SolidColorBrush. Asígnele un nombre x:Key específico para su uso.Give it a x:Key name specific to what it is being used for.
  3. Asigne el color que desee.Assign the Color you want for it.
  4. Copie el pincel en 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>

El último paso es determinar qué color se usará en el contraste alto y se trata en la siguiente sección.The last step is to determine what color to use in high contrast, which is covered in the next section.

Nota

HighContrast no es el único nombre de clave disponible.HighContrast is not the only available key name. También están HighContrastBlack, HighContrastWhite y HighContrastCustom.There's also HighContrastBlack, HighContrastWhite, and HighContrastCustom. En la mayoría de los casos, solo necesitarás HighContrast.In most cases, HighContrast is all you need.

Colores de alto contrasteHigh contrast colors

En la página Configuración > Accesibilidad > Contraste alto, hay 4 temas de contraste alto de manera predeterminada.On the Settings > Ease of access > High contrast page, there are 4 high contrast themes by default.

Configuración de contraste alto

Cuando el usuario selecciona una opción, la página muestra una vista previa.After the user selects an option, the page shows a preview.

Recursos de contraste alto

Se puede hacer clic en todas las muestras de colores de la vista previa para cambiar su valor. Cada muestra también se asigna directamente a un recurso de color XAML.Every color swatch on the preview can be clicked to change its value. Every swatch also directly maps to an XAML color resource.

Cada recurso de **color de SystemColor *** es una variable que actualiza automáticamente el color cuando el usuario cambia los temas de contraste alto.Each SystemColor*Color resource is a variable that automatically updates color when the user switches high contrast themes. A continuación se muestran directrices sobre dónde y cuándo usar cada recurso.Following are guidelines for where and when to use each resource.

RecursoResource UsoUsage
SystemColorWindowTextColorSystemColorWindowTextColor Copia del cuerpo, encabezados, listas; cualquier texto con el que no se pueda interactuarBody copy, headings, lists; any text that can't be interacted with
SystemColorHotlightColorSystemColorHotlightColor HipervínculosHyperlinks
SystemColorGrayTextColorSystemColorGrayTextColor Interfaz de usuario deshabilitadaDisabled UI
SystemColorHighlightTextColorSystemColorHighlightTextColor Color de primer plano de la interfaz de usuario o el texto en curso o seleccionado, o con el que se esté interactuando actualmenteForeground color for text or UI that's in progress, selected, or currently being interacted with
SystemColorHighlightColorSystemColorHighlightColor Color de fondo de la interfaz de usuario o el texto en curso o seleccionado, o con el que se esté interactuando actualmenteBackground color for text or UI that's in progress, selected, or currently being interacted with
SystemColorButtonTextColorSystemColorButtonTextColor Color de primer plano de los botones; cualquier interfaz de usuario con la que se pueda interactuarForeground color for buttons; any UI that can be interacted with
SystemColorButtonFaceColorSystemColorButtonFaceColor Color de fondo de los botones; cualquier interfaz de usuario con la que se pueda interactuarBackground color for buttons; any UI that can be interacted with
SystemColorWindowColorSystemColorWindowColor Fondo de páginas, paneles, elementos emergentes y barrasBackground of pages, panes, popups, and bars

A menudo resulta útil observar las aplicaciones existentes, Inicio o los controles comunes para ver cómo han resuelto otras personas problemas de diseño de contraste alto similares a los tuyos.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

  • Respetar los pares de fondo/primer plano siempre que sea posible.Respect the background/foreground pairs where possible.
  • Probar los 4 temas de contraste alto mientras se ejecuta la aplicación.Test in all 4 high contrast themes while your app is running. El usuario no debería tener que reiniciar la aplicación al cambiar los temas.The user should not have to restart your app when they switch themes.
  • Ser coherente.Be consistent.

NoDon't

  • Codifique un color en el tema HighContrast ; Use los recursos del **color de SystemColor *** .Hard code a color in the HighContrast theme; use the SystemColor*Color resources.
  • Elegir un recurso de color con fines estéticos.Choose a color resource for aesthetics. Recuerda que cambian con el tema.Remember, they change with the theme!
  • No use SystemColorGrayTextColor para la copia del cuerpo que sea secundaria o actúe como una sugerencia.Don't use SystemColorGrayTextColor for body copy that's secondary or acts as a hint.

Para continuar con el ejemplo anterior, debe elegir un recurso para BrandedPageBackgroundBrush.To continue the earlier example, you need to pick a resource for BrandedPageBackgroundBrush. Dado que el nombre indica que se usará para un fondo, SystemColorWindowColor es una buena elección.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>

Más adelante, en la aplicación, puedes establecer el fondo.Later in your app, you can now set the background.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Observe cómo se usa ** { ThemeResource } ** dos veces, una vez para hacer referencia a SystemColorWindowColor y otra para hacer referencia a BrandedPageBackgroundBrush.Note how {ThemeResource} is used twice, once to reference SystemColorWindowColor and again to reference BrandedPageBackgroundBrush. Ambos son necesarios para que la aplicación use el tema correctamente en tiempo de ejecución.Both are required for your app to theme correctly at run time. Este es un buen momento para probar la funcionalidad en la aplicación.This is a good time to test out the functionality in your app. El fondo de Grid se actualizará automáticamente al cambiar a un tema de contraste alto.The Grid's background will automatically update as you switch to a high contrast theme. También se actualizará al cambiar entre los distintos temas de contraste alto.It will also update when switching between different high contrast themes.

Cuándo usar bordesWhen to use borders

Las páginas, los paneles, los elementos emergentes y las barras deben usar SystemColorWindowColor para su fondo en contraste alto.Pages, panes, popups, and bars should all use SystemColorWindowColor for their background in high contrast. Agrega un borde solo de contraste alto cuando sea necesario para conservar los límites importantes en la interfaz de usuario.Add a high contrast-only border where necessary to preserve important boundaries in your UI.

Un panel de navegación separado del resto de la página

El panel de navegación y la página comparten el mismo color de fondo en contraste alto. Es esencial un borde de solo contraste alto para dividirlos.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.

Enumeración de elementosList items

En contraste alto, los elementos de un control ListView tienen el fondo establecido en SystemColorHighlightColor al mantener el mouse, presionar o seleccionar.In high contrast, items in a ListView have their background set to SystemColorHighlightColor when they are hovered, pressed, or selected. Los elementos de lista complejos suelen presentar un error en que el contenido del elemento de lista no puede invertir el color al mantener el mouse sobre el elemento, pulsarlo o seleccionarlo.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. Esto hace que el elemento no se pueda leer.This makes the item impossible to read.

Lista simple con el tema claro y el tema Negro en contraste alto

Una lista simple en el tema claro (izquierda) y contraste alto tema negro (derecha). El segundo elemento está seleccionado; Observe cómo se invierte el color del texto en contraste alto.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.

Elementos de lista con texto de colorList items with colored text

Una causa es establecer TextBlock.Foreground en la clase DataTemplate de ListView.One culprit is setting TextBlock.Foreground in the ListView's DataTemplate. Normalmente, esto se hace para establecer una jerarquía visual.This is commonly done to establish visual hierarchy. La propiedad Foreground se establece en la clase ListViewItem y la propiedad TextBlocks de DataTemplate hereda el color de Foreground correcto al mantener el mouse sobre el elemento, pulsarlo o seleccionarlo.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. Sin embargo, al establecer Foreground se interrumpe la herencia.However, setting Foreground breaks the inheritance.

Lista compleja con el tema claro y el tema Negro en contraste alto

Lista compleja en el tema claro (izquierda) y contraste alto tema negro (derecha). En contraste alto, no se pudo invertir la segunda línea del elemento seleccionado.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.

Puede solucionar este problema estableciendo el primer plano de forma condicional a través de un estilo que se encuentra en una colección de ThemeDictionaries .You can work around this by setting Foreground conditionally via a Style that's in a ThemeDictionaries collection. Dado que SecondaryBodyTextBlockStyle no establece Foreground en HighContrast, su color se invertirá correctamente.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>

Detección de contraste altoDetecting high contrast

Puedes comprobar mediante programación si el tema actual es un tema de contraste alto usando los miembros de la clase AccessibilitySettings.You can programmatically check if the current theme is a high contrast theme by using members of the AccessibilitySettings class.

Nota

Asegúrate de llamar al constructor AccessibilitySettings desde un ámbito cuando la aplicación esté inicializada y ya esté mostrando contenido.Make sure you call the AccessibilitySettings constructor from a scope where the app is initialized and is already displaying content.