Temas de contraste

  • Artículo

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 necesariamente aumentan el contraste ni facilitan la visualización de las cosas. 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).

Calculadora que se muestra en tema claro y tema de contraste acuático.

Establecer HighContrastAdjustment en None

Las aplicaciones de Windows tienen HighContrastAdjustment activado de forma predeterminada. Esto establece todo el color del 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 distintos 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 ResourceDictionaryhighContrast(no es necesario un ResourceDictionary claro para este ejemplo).

  2. En el diccionario Default , 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. Consulta Colores de contraste para obtener más información sobre cómo elegir 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 imagen siguiente), los usuarios pueden seleccionar entre cuatro temas de contraste predeterminados: Acuático, Desierto, Dusk y Cielo nocturno.

Contrasta la configuración del tema.

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 .

Configuración: 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, ventanas emergentes y ventanas.

Emparejar con SystemColorWindowTextColor
SystemColorWindowTextColor
Encabezados, copia del cuerpo, listas, texto de marcador de posición, bordes de aplicación y ventana, cualquier interfaz de usuario con la que no se pueda interactuar.

Emparejar con SystemColorWindowColor
SystemColorHotlightColor
Hipervínculos.

Emparejar con SystemColorWindowColor
SystemColorGrayTextColor
Interfaz de usuario

inactiva (deshabilitada). Emparejar con SystemColorWindowColor
SystemColorHighlightTextColor
Color de primer plano para texto o interfaz de usuario que está seleccionado, interactúa con (mantener el puntero, presionar) o en curso.

Emparejamiento con SystemColorHighlightColor
SystemColorHighlightColor
Color de fondo o énfasis para la interfaz de usuario que está seleccionada, interactúa con (mantener el puntero, presionar) o en curso.

Emparejamiento con SystemColorHighlightTextColor
SystemColorButtonTextColor
Color de primer plano para los botones y cualquier interfaz de usuario con la que se pueda interactuar.

Emparejar con SystemColorButtonFaceColor
SystemColorButtonFaceColor
Color de fondo 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 fondo establecido en SystemColorWindowColor.

Ejemplo Valores
Ventana con texto mediante el color del texto de la ventana. SystemColorWindowTextColor
Ventana con texto de hipervínculo mediante el color de luz activa. SystemColorHotlightColor
Ventana con texto inactivo mediante el color gris del texto. SystemColorGrayTextColor
Ventana con texto con el color de texto resaltado en el color de resaltado. SystemColorHighlightTextColor + SystemColorHighlightColor
Ventana con un botón con el color de la cara 3d y el texto del botón mediante el color del texto del botón. 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 use el 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 los distintos 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 "Brush" 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.
  • Ser coherente.
  • Asegúrate de que HighContrastAdjustment esté establecido None en en la aplicación (está activada de forma predeterminada). Consulte Establecer HighContrastAdjustment en None.
  • No codifique de forma rígida un color en el tema HighContrast. En su lugar, use SystemColorColor y ColorBrush los recursos. Para obtener más información, consulte Colores codificados de forma rígida.
  • No mezclar pares en segundo plano o en 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 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 examinar la aplicación 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 los temas de contraste, pero debe tener cuidado al personalizar la interfaz de usuario de la aplicación. Dos de los problemas más comunes se producen 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 del texto de esta aplicación cambia a blanco mientras el fondo permanece gris claro. El contraste muy bajo entre el texto y el 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 los 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 temas de contraste. Para distinguirlos, es esencial un borde de solo tema de contraste.

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

Elementos de lista con texto de color

En los temas de contraste, los elementos de un control ListView tienen su fondo establecido en SystemColorHighlightColor cuando el usuario mantiene el puntero sobre ellos, 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 no se lean.

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

Lista compleja en tema claro y tema acuático (tenga en cuenta cómo el color del texto no se invierte en HighContrast).

Para resolverlo, establezca Foreground condicionalmente a través de una colección Style en una colección ThemeDictionaries . Dado que SecondaryBodyTextBlockStyle no establece el primer plano en HighContrast, el color se invertirá correctamente.

Lista compleja en tema claro y tema acuático (observe cómo se invierte el color del texto en HighContrast).

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 WinUI 3 Gallery 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, las características y la funcionalidad de WinUI 3. Obtenga la aplicación en Microsoft Store o el código fuente en GitHub.