microsoft
[Rendering] Misleading background color of Adaptive Card in different Microsoft Teams applications
Target Platforms
Other
SDK Version
1.5
Application Name
Microsoft Teams
Problem Description
The same Adaptive Card have different background and border in different application:
- Microsoft Teams for Windows desktop
- no border
- light gray background
- Microsoft Teams Web app
- dark border
- light gray background
- Microsoft Teams Android app
- dark border
- white background
This inconsistency is confusing in terms of how the Adaptive Card is displayed.
Additional, light gray background color of Adaptive Card makes the Styling of the elements look terrible. Default Style "Good", "Attention" and "Emphasis" are not enough visible, as difference between gray and this style color is not big enough.
Screenshots
Microsoft Teams for Windows desktop (version 24102.2223.2870.9480):
Microsoft Teams Web app:
Microsoft Teams Android app (version: 1416/1.0.0.2024083602/0507):
Card JSON
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Text",
"wrap": true,
"fontType": "Default",
"size": "Small"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "Text",
"fontType": "Default",
"size": "Small",
"horizontalAlignment": "Right"
}
]
}
]
},
{
"type": "TextBlock",
"text": "Text",
"height": "stretch",
"wrap": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"style": "good",
"items": [
{
"type": "TextBlock",
"text": "False",
"wrap": true,
"horizontalAlignment": "Center",
"height": "stretch",
"fontType": "Default",
"color": "default"
}
]
},
{
"type": "Column",
"width": "stretch",
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "true",
"wrap": true,
"horizontalAlignment": "Center",
"fontType": "Default",
"height": "stretch",
"color": "default"
}
]
}
]
}
]
}
Sample Code Language
No response
Sample Code
No response
We are having a hard time to design our app if the UI is that inconsistent. Are there any plans to make it look the same on all platforms or is there any documentation on all the different options so that we know what we have to expect?
I've also been finding this annoying, best workaround so far is to use a base64 encoded image of a 1x1 pixel image of whatever color background you want, apply that as the image URL, and set the ImageFillMode to repeat: https://adaptivecards.io/explorer/BackgroundImage.html
You can generate the code for the background with this: https://hradek.de/html/AdaptiveCardColorGIF.html
Any news on this one? Is it expected to unify the platforms again?
Additionally the given colors are super bad in terms of accessibility. The light red/green does not work at all and will definitely violate against the European accessibility act: 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
Are there any plans to support colors that are compatible with european law?
