Contrast themes (Temas de contraste)

Los temas de contraste usan una pequeña paleta de colores (con una relación de contraste de al menos 7:1) para ayudar a que los elementos de la interfaz de usuario sean más fáciles de ver, reducir la tensión ocular, mejorar la legibilidad del texto y adaptarse a las preferencias del usuario.

Nota:

No confunda los temas de contraste con temas claros y oscuros, que admiten una paleta de colores mucho más grande y no aumentan necesariamente el contraste ni hacen que las cosas sean más fáciles de ver. Para obtener más información sobre temas claros y oscuros, vea Color.

Para ver cómo se comporta la aplicación con temas de contraste, habilite y personalícelos a través de la página Temas de contraste de accesibilidad de configuración > >.

Sugerencia

También puede presionar la tecla Alt izquierda + Tecla Mayús + Pantalla de impresión (PrtScn en algunos teclados) para activar o desactivar rápidamente los temas de contraste. Si no ha seleccionado previamente un tema, el tema acuático se usa de forma predeterminada (se muestra en la imagen siguiente).

Establecer HighContrastAdjustment en None

Las aplicaciones de Windows tienen HighContrastAdjustment activado de forma predeterminada. Esto establece todo el color de texto en blanco con un resaltado negro sólido detrás de él, lo que garantiza un contraste suficiente con todos los fondos. Si usa pinceles correctamente, esta configuración debe desactivarse.

Detección de contraste alto

Puedes comprobar mediante programación si el tema actual es un tema de contraste a través de la clase AccessibilitySettings (debes llamar al constructor AccessibilitySettings desde un ámbito donde se inicializa la aplicación y ya muestra contenido).

Creación de diccionarios de temas

Un objeto ResourceDictionary.ThemeDictionaries puede indicar colores de tema diferentes de los colores definidos por el sistema especificando pinceles para los temas de contraste Default (Dark), Light y HighContrast .

Sugerencia

El tema de contraste hace referencia a la característica en general, mientras que HighContrast hace referencia al diccionario específico al que se hace referencia.

1. En App.xaml, cree una colección ThemeDictionaries con un valor Predeterminado y un ResourceDictionary HighContrast (un ResourceDictionary claro no es necesario para este ejemplo).

2. En el diccionario Predeterminado, cree el tipo de Brush que necesita (normalmente solidColorBrush). Asígnele un nombre x:Key correspondiente a su uso previsto (un staticResource que haga referencia a un pincel del sistema existente también sería adecuado).

3. En HighContrast ResourceDictionary (que se muestra en el siguiente fragmento de código), especifique un pincel SystemColor adecuado. Consulte Colores de contraste para obtener más información sobre cómo seleccionar uno de los colores highContrast del sistema dinámico para el pincel SystemColor.

   <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>
   

Colores de contraste

En la página Configuración > Facilidad de acceso > Temas de contraste (que se muestra en la siguiente imagen), los usuarios pueden seleccionar entre cuatro temas de contraste predeterminados: Acuático, Desierto, Dusk y Cielo nocturno.

Una vez que el usuario selecciona una opción, puede optar por aplicarla inmediatamente o editar el tema. En la imagen siguiente se muestra el cuadro de diálogo Editar tema para el tema de contraste acuático .

En esta tabla se muestran los colores del tema de contraste y sus emparejamientos recomendados. Cada recurso SystemColor es una variable que actualiza automáticamente el color cuando el usuario cambia los temas de contraste.

Muestra de color	Descripción
	SystemColorWindowColor Fondo de páginas, paneles, elementos emergentes y ventanas. Emparejamiento con SystemColorWindowTextColor
	SystemColorWindowTextColor Headings, body copy, lists, placeholder text, app and window borders, any UI that can't be interacted with. Emparejamiento con SystemColorWindowColor
	SystemColorHotlightColor Hyperlinks. Emparejamiento con SystemColorWindowColor
	Interfaz de usuario inactiva (deshabilitada) de SystemColorGrayTextColor . Emparejamiento con SystemColorWindowColor
	Color de primer plano de SystemColorHighlightTextColor para texto o interfaz de usuario que está seleccionado, interactuado con (mantener el puntero, presionar) o en curso. Emparejamiento con SystemColorHighlightColor
	SystemColorHighlightColor Background or accent color for UI that is in selected, interacted with (hover, pressed) or in progress. Emparejamiento con SystemColorHighlightTextColor
	Color de primer plano de SystemColorButtonTextColor para botones y cualquier interfaz de usuario con la que se pueda interactuar. Emparejar con SystemColorButtonFaceColor
	Color de fondo de SystemColorButtonFaceColor para botones y cualquier interfaz de usuario con la que se pueda interactuar. Emparejar con SystemColorButtonTextColor

En la tabla siguiente se muestra cómo aparecen los colores cuando se usan en un conjunto de fondos en SystemColorWindowColor.

Ejemplo	Valores
	SystemColorWindowTextColor
	SystemColorHotlightColor
	SystemColorGrayTextColor
	SystemColorHighlightTextColor + SystemColorHighlightColor
	SystemColorButtonTextColor + SystemColorButtonFaceColor

En el siguiente fragmento de código, se muestra cómo elegir un recurso para BrandedPageBackgroundBrush. SystemColorWindowColor es una buena opción aquí, ya que BrandedPageBackgroundBrush indica que se usará para un fondo.

<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>

A continuación, el recurso se asigna al fondo de un elemento.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

{ThemeResource} Usamos dos veces en el ejemplo anterior, una vez para hacer referencia a SystemColorWindowColor y de nuevo para hacer referencia a BrandedPageBackgroundBrush. Ambos son necesarios para que la aplicación se tema correctamente en tiempo de ejecución. Este es un buen momento para probar la funcionalidad en la aplicación. El fondo grid se actualizará automáticamente a medida que cambie a un tema de contraste alto. También se actualizará al cambiar entre diferentes temas de contraste alto.

Nota:

WinUI 2.6 y versiones posteriores

Hay ocho pinceles del sistema de contraste alto disponibles para hacer referencia a través de resourceKey (consulte el ejemplo siguiente para SystemColorWindowTextColorBrush).

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

Los nombres de pincel coinciden exactamente con uno de los ocho colores del sistema mencionados anteriormente (con "Pincel" anexado). Se recomienda usar staticResource en lugar de solidColorBrush local por motivos de rendimiento.

procedimientos recomendados

Estas son algunas recomendaciones para personalizar los colores del tema de contraste en la aplicación de Windows.

• Pruebe en los cuatro temas de contraste alto mientras se ejecuta la aplicación.
• Sea coherente.
• Asegúrese de que HighContrastAdjustment está establecido None en en la aplicación (está activada de forma predeterminada). Vea Establecer HighContrastAdjustment en Ninguno.
• No codifique de forma rígida un color en el tema HighContrast. En su lugar, use SystemColor Color y ColorBrush los recursos. Para obtener más información, consulte Colores codificados de forma rígida.
• No mezclar pares de fondo o primer plano que no sean compatibles
• No elija el recurso de color para la estética. Recuerde que los colores cambian con el tema.
• No use SystemColorGrayTextColor para la copia del cuerpo que sea secundaria o actúe como texto de sugerencia. Esto está pensado solo para contenido deshabilitado.
• No use SystemColorHotlightColor y el pincel correspondiente, ya que ambos están reservados para hipervínculos.

Sugerencia

A menudo resulta útil ver la aplicación De la Galería de WinUI para ver cómo los controles comunes usan los pinceles SystemColor . Si ya se instalaron, haga clic en los vínculos siguientes para abrirlas: WinUI 3 Gallery o WinUI 2 Gallery.

Si no están instaladas, puede descargar WinUI 3 Gallery y WinUI 2 Gallery desde Microsoft Store.

También puede obtener el código fuente de ambas desde GitHub (use la bifurcación principal para WinUI 3 y la bifurcación winui2 para WinUI 2).

Colores codificados de forma rígida

Los controles de plataforma proporcionan compatibilidad integrada con temas de contraste, pero debe tener cuidado al personalizar la interfaz de usuario de la aplicación. Se producen dos de los problemas más comunes cuando se usa el color de un elemento de forma rígida o se usa un recurso SystemColor incorrecto.

En el siguiente fragmento de código, se muestra un elemento Grid declarado con un color de fondo establecido #E6E6E6 en (un gris muy claro). Si codifica de forma rígida el color de esta manera, también invalida el color de fondo en todos los temas. Por ejemplo, si el usuario selecciona el tema de contraste acuático , en lugar de texto blanco en un fondo casi negro, el color de texto de esta aplicación cambia a blanco mientras el fondo permanece gris claro. El contraste muy bajo entre texto y fondo podría hacer que esta aplicación sea muy difícil de usar.

<Grid Background="#E6E6E6">

En su lugar, se recomienda usar la extensión de marcado {ThemeResource} para hacer referencia a un color en la colección ThemeDictionaries de un ResourceDictionary. Esto permite la sustitución automática de colores y pinceles en función del tema actual del usuario.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Bordes

Las páginas, los paneles, los elementos emergentes y las barras deben usar SystemColorWindowColor para su fondo. Agregue un borde de solo tema de contraste solo cuando sea necesario para conservar límites importantes en la interfaz de usuario.

Sugerencia

Se recomienda usar bordes 2px para superficies transitorias, como controles flotantes y cuadros de diálogo.

El panel de navegación y la página comparten el mismo color de fondo en los temas de contraste. Para distinguirlos, un borde de solo tema de contraste es esencial.

Enumerar elementos con texto coloreado

En los temas de contraste, los elementos de un control ListView tienen su fondo establecido en SystemColorHighlightColor cuando el usuario mantiene el puntero sobre, presiona o los selecciona. Un problema común con los elementos de lista complejos se produce cuando el contenido del elemento de lista no puede invertir su color, lo que hace que los elementos sean imposibles de leer.

Tenga cuidado al establecer el elemento TextBlock.Foreground en dataTemplate de ListView (normalmente se realiza para establecer la jerarquía visual). La propiedad Foreground se establece en listViewItem y cada TextBlock de DataTemplate hereda el color de primer plano correcto. Al establecer Primer plano , se interrumpe esta herencia.

Puede resolverlo estableciendo foreground condicionalmente a través de un estilo en una colección ThemeDictionaries. Como SecondaryBodyTextBlockStyle no establece foreground en HighContrast, el color se invertirá correctamente.

El siguiente fragmento de código (de un archivo App.xaml) muestra una colección ThemeDictionaries de ejemplo en una plantilla de datos ListView.

<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>

Ejemplos

Sugerencia

Abra la aplicación Galería de WinUI 3 y vea compatibilidad con la accesibilidad de contraste de color en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtenga la aplicación de Microsoft Store u obtenga el código fuente en GitHub.

Temas relacionados

• Accesibilidad
• Ejemplo de contraste y configuración de la interfaz de usuario
• Ejemplo de accesibilidad XAML
• Ejemplo de contraste alto xaml
• AccessibilitySettings