[Adaptive Cards - Designer - CARD STRUCTURE] - Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds (.acd-tree-item-additionalText)

[Rishikesh6521]

Target Platforms

Other

SDK Version

1.6

Application Name

Adaptive Cards

Problem Description

Test Environment:
URL: https://adaptivecards.io/
OS Version: 25H2 (OS Build 26200.5761)
Browser Version: Version 145.0.3734.1 (Official build) dev (64-bit)
Tool: Accessibility insights for web and Color Contrast analyzer -> Launch through Accessibility Insights for Windows Tool

Repro Steps:

1. Open the above URL on the Edge Dev browser.
2. Navigate to the 'Designer' control present on the header section of the page using tab key and activate using enter key.
3. Navigate to the 'CARD STRUCTURE' flyout using tab key and activate using enter key.
4. Now navigate to the '[${title}]', '[2 columns]' and '[Automatic]' etc., text using tab key.
5. Launch Accessibility Insights for Windows tool and open Color contrast analyzer and select the foreground and its adjacent background color of the '[${title}]', '[2 columns]' and '[Automatic]' etc., text on receiving keyboard focus.
6. Verify that, luminosity ratio of '[${title}]', '[2 columns]' and '[Automatic]' etc., text present inside the 'CARD STRUCTURE' flyout on receiving keyboard focus with respect to its adjacent background color is less than minimum required ratio i.e., 4.5:1 or not.

Actual Result:
Luminosity ratio of '[${title}]', '[2 columns]' and '[Automatic]' etc., text present inside the 'CARD STRUCTURE' flyout on receiving keyboard focus with respect to its adjacent background color is 3.39:1, which is less than minimum required ratio i.e., 4.5:1.

Expected Result:
Issue: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds (color-contrast - https://accessibilityinsights.io/info-examples/web/color-contrast)
Luminosity ratio of '[${title}]', '[2 columns]' and '[Automatic]' etc., text present inside the 'CARD STRUCTURE' flyout on receiving keyboard focus with respect to its adjacent background color should be greater than or equal to the minimum required ratio i.e., 4.5:1.

Element path: .selected.acd-tree-item > .acd-tree-item-text > .acd-tree-item-additionalText

Snippet: span class="acd-tree-item-additionalText"> [${title}]</span

How to fix:
Fix any of the following:
Element has insufficient color contrast of 3.39 (foreground color: #757575, background color: #bce2ff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1

User Experience:
Low vision and color vision deficiency users will not be able to identify/read the text because of its low contrast ratio with its adjacent background color and due to this user might miss the information conveyed by the meaningful texts and not able to access the control properly.

WCAG Reference:
https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html

Have feedback to share on Bugs ? please tag bug as “A11yRCA” and add your feedback in the comment section

Screenshots

Card JSON

NA

Sample Code Language

No response

Sample Code

No response

[Rishikesh6521]

Designer page is going to be deprecated, hence closing the bug.