Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
La versión web y la versión de escritorio de Teams admiten temas predeterminados (claros, oscuros y de contraste alto), mientras que la versión móvil de Teams admite temas claros y oscuros. Cada tema de Teams tiene su propia combinación de colores.
Instrucciones
El uso de colores estándar de Teams, que están diseñados para cumplir con los requisitos de contraste de las directrices de accesibilidad de contenido web (WCAG) 2.1, garantiza una experiencia coherente y accesible en todos los temas admitidos.
Agregar colores cuando sea necesario
Comience desde un lienzo blanco y agregue colores solo si es necesario. Evite usar colores para pintar grandes superficies, como tarjetas. En su lugar, use colores para crear una jerarquía, por ejemplo, resaltando acciones importantes.
Poner primero la accesibilidad
Siempre tiene como objetivo presentar el contenido de la aplicación teniendo en cuenta todas las necesidades y preferencias del usuario. El color del texto y los elementos importantes, como los iconos, deben ser accesibles.
Usar colores de forma coherente
No confunda usando colores de forma incoherente. Use los colores principales y los colores secundarios de Teams, que transmiten actividad, errores y otros estados comunes.
Colores principales y tokens de color
Cada tema de Teams tiene su propia combinación de colores. Para controlar los cambios de tema automáticamente, puede especificar tokens de color en el diseño.
Obtenga información sobre cómo usar tokens de color en el proyecto de aplicación de Teams.
Ejemplo de diseño con tokens
Los siguientes valores de token son para el tema predeterminado (claro):
| Contador | Descripción |
|---|---|
| A | Fondo 2: Color de fondo del lienzo |
| N | Primer plano predeterminado: color de texto principal |
| C | Primer plano 1: color de texto secundario |
| D | Fondo de marca: color de fondo del botón principal |
| E | Primer plano de marca: color de texto de vínculo |
Integración de la paleta de colores de las aplicaciones con Teams
Color principal
| Contador | Descripción |
|---|---|
| 1 | Color del botón de acción en un componente incrustado |
| 2 | Color del botón de acción en una aplicación personal |
Aplicar el color principal
Colores secundarios
| Contador | Descripción |
|---|---|
| 1 | Colores secundarios de Teams |
| 2 | Colores secundarios personalizados en una aplicación de ejemplo |
Procedimientos recomendados
Hacer: Usar colores con propósito
Los colores se deben usar para resaltar la funcionalidad, definir la jerarquía y transmitir estados diferentes. Evite usar colores cuando no esté vinculado a ningún significado semántico.
Hacer: Usar la paleta de colores neutros para crear profundidad
Use siempre la paleta de colores de escala de grises neutra proporcionada en este kit como base de la interfaz de usuario. Puede incluir pasos adicionales de gris para reforzar una sensación de profundidad y jerarquía. Las capas deben aparecer más brillantes a medida que se mueven por el eje Z.
No: use el color solo para la personalización de marca.
No use colores solo con fines de personalización de marca o deleitación visual. Evite usar colores en superficies grandes, como el fondo de tarjetas y encabezados.
No lo hagas: Complicarse demasiado
Por ejemplo, no tengas diferentes tonos de gris para temas claros y oscuros. Además, en superficies grandes, nunca use colores neutros que no sean escala de grises.
Colaborar con nosotros en GitHub
El origen de este contenido se puede encontrar en GitHub, donde también puede crear y revisar problemas y solicitudes de incorporación de cambios. Para más información, consulte nuestra guía para colaboradores.