Color en Windows
Windows emplea color para ayudar a los usuarios a centrarse en sus tareas indicando una jerarquía visual y una estructura entre los elementos de la interfaz de usuario. El color apropiado para el contexto y se usa para proporcionar una base tranquilizadora, lo que mejora sutilmente las interacciones del usuario y resalta elementos significativos solo cuando es necesario.
Sugerencia
En este artículo se describe cómo se aplica el lenguaje Fluent Design a las aplicaciones de Windows. Para obtener más información, vea Fluent Design - Color.
Modos de color
Windows admite dos modos de color o temas: claro y oscuro. Cada modo consta de un conjunto de valores de color neutros que se ajustan automáticamente para garantizar un contraste óptimo.
En los modos de color claro y oscuro, los colores más oscuros indican superficies de fondo de menor importancia. Las superficies importantes están resaltadas con colores más claros y brillantes. Consulte capas y elevación para obtener más información.
Color de énfasis
El color de énfasis se usa para resaltar elementos importantes en la interfaz de usuario y para indicar el estado de un objeto o control interactivos. Los valores de color de énfasis se generan automáticamente y se optimizan para el contraste en modos claros y oscuros. Los colores de énfasis se usan con moderación para resaltar elementos importantes y transmitir información sobre el estado de un elemento interactivo.
Ejemplos
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.
Color en las aplicaciones de Windows
El color proporciona una forma intuitiva de comunicar información a los usuarios en tu aplicación. Puede usarse para indicar interactividad, proporcionar comentarios a las acciones del usuario y dar una sensación de continuidad visual a tu interfaz.
En aplicaciones de Windows, los colores vienen determinados principalmente por el color de énfasis y el tema. En este artículo, trataremos cómo puedes usar el color en la aplicación y cómo se emplean los recursos de tema y color de énfasis para que una aplicación de Windows se pueda usar en cualquier contexto de tema.
Principios de color
Usar el color con sentido. Cuando se usa color con moderación para resaltar elementos importantes, puede ayudar a crear una interfaz de usuario que sea fluida e intuitiva.
Usar color para indicar interactividad. Es aconsejable elegir un color para indicar qué elementos de tu aplicación son interactivos. Por ejemplo, muchas páginas web usan texto azul para indicar un hipervínculo.
El color es personal. En Windows, los usuarios pueden elegir un color de énfasis y un tema claro u oscuro, que se reflejan en toda su experiencia. Puedes elegir cómo incorporar el tema y el color de énfasis del usuario en la aplicación, personalizando su experiencia.
El color es cultural. Ten en cuenta cómo las personas de diferentes culturas interpretarán los colores que usas. Por ejemplo, en algunas culturas el color azul se asocia a virtud y protección, mientras que en otras representa duelo.
Temas
Las aplicaciones de Windows pueden usar un tema de aplicación claro u oscuro. El tema afecta a los colores de fondo, al texto, a los iconos y a los controles comunes de la aplicación.
Tema claro
Tema oscuro
De manera predeterminada, el tema de tu aplicación de Windows es la preferencia de tema del usuario de la configuración de Windows o el tema predeterminado del dispositivo. Sin embargo, puede configurar el tema específicamente para su aplicación de Windows.
Modificación del tema
Para modificar temas, cambia la propiedad RequestedTheme en el archivo App.xaml.
<Application
x:Class="App9.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App9"
RequestedTheme="Dark">
</Application>
Si quitas la propiedad RequestedTheme, la aplicación usará la configuración del sistema del usuario.
Los usuarios también pueden seleccionar el tema de contraste alto, que usa una pequeña paleta de colores que contrastan entre sí, lo que facilita la visualización de la interfaz. En ese caso, el sistema invalidará tu RequestedTheme.
Temas de pruebas
Si no solicitas un tema para la aplicación, asegúrate de probarla tanto en temas claros como oscuros para garantizar que sea legible en todas las circunstancias.
Pinceles de temas
Los controles comunes usan automáticamente pinceles de temas para ajustar el contraste para temas claros y oscuros.
Por ejemplo, esta es una ilustración de cómo AutoSuggestBox usa pinceles de temas:
Usar pinceles de temas
Al crear plantillas para controles personalizados, usa pinceles de temas en lugar de valores de color codificados. De esta forma, tu aplicación se puede adaptar con facilidad a cualquier tema.
Por ejemplo, estas plantillas de elementos para ListView muestran cómo usar los pinceles de tema en una plantilla personalizada.
<ListView ItemsSource="{x:Bind ViewModel.Recordings}">
<ListView.ItemTemplate>
<DataTemplate x:Name="DoubleLineDataTemplate" x:DataType="local:Recording">
<StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{x:Bind CompositionName}">
<Ellipse Height="48" Width="48" VerticalAlignment="Center">
<Ellipse.Fill>
<ImageBrush ImageSource="Placeholder.png"/>
</Ellipse.Fill>
</Ellipse>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
<TextBlock Text="{x:Bind CompositionName}" Style="{ThemeResource BodyStrongTextBlockStyle}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
<TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Para obtener más información sobre cómo usar pinceles de temas en tu aplicación, consulta Recursos de temas.
Colores de énfasis
Los controles comunes usan un color de énfasis para transmitir información de estado. De manera predeterminada, el color de énfasis es el SystemAccentColor que los usuarios seleccionan en la configuración. A pesar de esto, también puedes personalizar el color de énfasis de tu aplicación para reflejar tu marca.
Reemplazar el color de énfasis
Para cambiar el color de énfasis de tu aplicación, coloca el siguiente código en app.xaml.
<Application.Resources>
<ResourceDictionary>
<Color x:Key="SystemAccentColor">#107C10</Color>
</ResourceDictionary>
</Application.Resources>
Elegir un color de énfasis
Si seleccionas un color de énfasis personalizado para tu aplicación, asegúrate de que el texto y los fondos que usan el color de énfasis tengan suficiente contraste para mejorar la legibilidad. Para probar el contraste, puedes usar la herramienta Selector de colores en la configuración de Windows, o bien emplear estas herramientas de contraste en línea.
Paleta de color de énfasis
Un algoritmo de color de énfasis en el shell de Windows genera tonos claros y oscuros del color de énfasis.
Puedes acceder a estos tonos como recursos de temas:
SystemAccentColorLight3SystemAccentColorLight2SystemAccentColorLight1SystemAccentColorDark1SystemAccentColorDark2SystemAccentColorDark3
También puedes acceder a la paleta de colores de énfasis mediante programación con el método UISettings.GetColorValue y la enumeración UIColorType.
Es posible usar la paleta de colores de énfasis para los temas de color de la aplicación. A continuación se incluye un ejemplo de cómo se puede usar la paleta de colores de énfasis en un botón.
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemAccentColorLight1}"/>
<SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemAccentColorDark1}"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Page.Resources>
<Button Content="Button"></Button>
Cuando uses el texto con color en un fondo con color, asegúrate de que hay suficiente contraste entre el texto y el fondo. De manera predeterminada, el hipervínculo o el hipertexto usarán el color de énfasis. Si aplicas variaciones del color de énfasis al fondo, debes usar una variación del color de énfasis original para optimizar el contraste del texto con color en un fondo con color.
En el gráfico siguiente se muestra un ejemplo de los distintos tonos claros y oscuros del color de énfasis y de cómo se puede aplicar un tipo con color a una superficie con color.
Para obtener más información sobre los controles de estilos, consulta Estilos XAML.
API de color
Hay varias API que se pueden usar para agregar color a la aplicación. En primer lugar, la clase Colors, que implementa una gran lista de colores predefinidos. Se puede acceder automáticamente a estos con las propiedades XAML. En el siguiente ejemplo, creamos un botón y establecemos las propiedades de color de fondo y de primer plano en miembros de la clase Colors.
<Button Background="MediumSlateBlue" Foreground="White">Button text</Button>
Puedes crear tus propios colores a partir de valores hexadecimales o RGB con la estructura Color en XAML.
<Color x:Key="LightBlue">#FF36C0FF</Color>
También puedes crear el mismo color en código mediante el método FromArgb.
Color LightBlue = Color.FromArgb(255,54,192,255);
Windows::UI::Color LightBlue = Windows::UI::ColorHelper::FromArgb(255,54,192,255);
Las letras "Argb" significan "alfa (opacidad), rojo, verde y azul", que son los cuatro componentes de un color. Cada argumente puede oscilar entre 0 y 255. Puedes optar por omitir el primer valor, lo que dará una opacidad predeterminada de 255, o 100 % opaco.
Nota:
Si usas C++, debes crear colores mediante la clase ColorHelper.
El uso más habitual de Color es como argumento de un SolidColorBrush, que se puede usar para pintar elementos de la interfaz de usuario de un solo color sólido. Por lo general, estos pinceles se definen en una clase ResourceDictionary, de modo que puedan volver a usarse para varios elementos.
<ResourceDictionary>
<SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#FFFF4F67"/>
<SolidColorBrush x:Key="ButtonForegroundBrush" Color="White"/>
</ResourceDictionary>
Para obtener más información sobre cómo usar pinceles, consulta Pinceles XAML.
Facilidad de uso
Contraste
Asegúrate de que los elementos e imágenes tienen un contraste suficiente para diferenciarlos, independientemente del color o el tema de énfasis.
Al pensar qué colores usarás en la aplicación, la accesibilidad deberá ser uno de los principales objetivos. Sigue las instrucciones que se indican a continuación para asegurarte de que la aplicación sea lo más accesible posible para todos los usuarios.
Iluminación
Ten en cuenta que la variación de la iluminación ambiente puede afectar a la facilidad de uso de la aplicación. Por ejemplo, una página con un fondo negro podría no ser ilegible en el exterior debido al brillo de la pantalla, mientras que una página con un fondo blanco podría ser molesta de mirar en una sala oscura.
Daltonismo
Ten en cuenta que el daltonismo puede afectar a la facilidad de uso de la aplicación. Por ejemplo, un usuario con daltonismo rojo-verde tendrá dificultades para distinguir entre sí los elementos rojos y verdes. Aproximadamente el 8 por ciento de los hombres y el 0,5 por ciento de las mujeres tienen daltonismo rojo-verde. Evita usar estas combinaciones de colores como único diferenciador entre los elementos de la aplicación.
