Forum Discussion
AF-Axione
May 27, 2024Copper Contributor
[Adaptive cards] Background color changed with the new Teams
Hello, Since the new Teams update, rendering of the background color on adaptive cards are different. Attention (red) and Warning (orange) are looking too much alike using both Light and Dark theme...
Dinesh-MSFT
Microsoft
May 27, 2024Hi AF-Axione - Thanks for raising the query.
To address background color rendering issues on adaptive cards in the new Teams update, ensure your colors maintain enough contrast for readability in both light and dark themes. Follow these steps:
- Use Color Tokens:
- Teams color tokens handle theme changes automatically. Refer to Fluent UI documentation for implementation.
- Apply Primary and Secondary Colors:
- Use Teams' primary and secondary colors for consistency and effective state conveyance. Refer to Teams color guidelines for examples.
- Ensure Accessibility:
- Ensure text and important elements have enough contrast to meet WCAG 2.1 standards for readability and accessibility.
Following these steps will help you adjust adaptive card colors to work with the new Teams update, ensuring a consistent and accessible user experience.