Color
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:
Sugerencia
Para obtener información general visual sobre los pinceles de tema disponibles, consulte la aplicación Galería de WinUI 3: Colores.
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.
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.
Color 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.
Temas relacionados
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de