[Rendering] Defined styling colors needs more contrast in Microsoft Teams

[MajaEffenberg]

Target Platforms

Other

SDK Version

1.5

Application Name

Microsoft Teams

Problem Description

The background colors used for columns and containers in specific styles are too light and do not provide enough contrast against the Adaptive Card’s light gray background in Microsoft Teams. The colors blend in too much, making the elements hard to see and causing the overall styling to look poor. This issue affects all styles:

• good
• emphasis
• attention
• accent
• warning

Screenshots

In classic mode:

In light mode:

In dark mode:

Card JSON

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "style": "good",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "good",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "style": "emphasis",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "emphasis",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "style": "attention",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "attention",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "style": "accent",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "accent",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "style": "warning",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "warning",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                }
            ]
        }
    ]
}

Sample Code Language

No response

Sample Code

No response

[sayali-MSFT]

Hello @MajaEffenberg , Thank you for your report!! We were able to reproduce the issue in the Desktop Teams version [25094.310.3616.953.]. We have reported this as a bug for further investigation.

We will keep you updated as soon as we receive further information if it is bug or byDesign behaviour. Thank you for bringing this to our attention!

[sschoeb]

@sayali-MSFT anything more on this? With this colors it is super hard (or even impossible) to be compatible with EU law (https://commission.europa.eu/strategy-and-policy/policies/justice-and-fundamental-rights/disability/union-equality-strategy-rights-persons-disabilities-2021-2030/european-accessibility-act_en)