Forum Discussion

AF-Axione's avatar
AF-Axione
Copper Contributor
May 27, 2024

[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.

  • 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:

    1. Use Color Tokens:
    1. Apply Primary and Secondary Colors:
    • Use Teams' primary and secondary colors for consistency and effective state conveyance. Refer to Teams color guidelines for examples.
    1. 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.

  • KirstenH325's avatar
    KirstenH325
    Copper Contributor
    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.

Resources