Skip to content

[Adaptive Cards - Designer] - Luminosity ratio of selected 'Preview mode' control with respect to its non-selected adjacent background color area is 1.261, which is less than minimum required ratio i.e., 3:1. #9324

@Rishikesh6521

Description

@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: 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 'Preview mode' control using tab key and activate using enter key.
  4. Launch Accessibility Insights for Windows tool and open Color contrast analyzer and select the foreground and its adjacent background color of the selected 'Preview mode' control with respect to non-selected background.
  5. Verify that, luminosity ratio of selected 'Preview mode' control with respect to its non-selected adjacent background color area is less than minimum required ratio i.e., 3:1 or not.

Actual Result:
Luminosity ratio of selected 'Preview mode' control with respect to its non-selected adjacent background color area is 1.261, which is less than minimum required ratio i.e., 3:1 due to which users will not be able to identify the control is selected.

Expected Result:
Luminosity ratio of selected 'Preview mode' control with respect to its non-selected adjacent background color area should be greater than or equal to the minimum required ratio i.e., 3:1.

User Experience:
Users with visual impairments, especially those with low vision or color blindness, may struggle to distinguish the selected controls due to the insufficient contrast due to which users might not distinguish the selected and non-selected control.

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

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

Screenshots

Image

Card JSON

NA

Sample Code Language

No response

Sample Code

No response

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions