Forum Discussion
[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.
I'm using colored containers as card header, so it makes reading them confusing.
oldTeams_DarkoldTeams_LightnewTeams_DarknewTeams_Light
Old Teams version : 1.7.00.7956
New Teams version : 24102.2223.2870.9480
Thank you.
Dinesh-MSFTMicrosoft
Hi 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.
- I have the same problem.
The colors in the new teams are not recognizable at all (light and dark theme). That's horrible!
Any solution for that? The answer from Dinesh-MSFT does not help me.
