Compartir vía


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 es apropiado para el contexto y se usa para proporcionar una base tranquilizadora, mejorando sutilmente las interacciones del usuario y resaltando 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 y temas

Imagen destacada 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. Las aplicaciones de Windows pueden usar un tema de aplicación claro o oscuro, que afecta a los colores del fondo, el texto, los iconos y los controles comunes de la aplicación.

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.

De forma predeterminada, el tema de la aplicación de Windows es la preferencia de tema del usuario de configuración de Windows o el tema predeterminado del dispositivo. Sin embargo, puedes establecer el tema específicamente para tu aplicación. Para obtener información sobre cómo cambiar los temas, use pinceles de tema y personalice los colores de énfasis en el código, consulte Temas en aplicaciones de Windows.

Color de énfasis

Controles variados en modo claro

Controles variados en modo oscuro

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.

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.

Facilidad de uso

Ilustración de contraste

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.

Ilustración de iluminación

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.

Ilustración de daltonismo

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.