[MGTP - Mgt-Person-More -Properties-More Example]: Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds (.styled-person,.line1[aria-label="Megan Bowen"][part="detail-line"])

[vagpt]

Test Environment:
OS Build: Windows 11
Version: 24H2 (OS Build 25346.1001)
Browser: Edge dev
Browser Version 114.0.1807.5 (Official build) dev (64-bit)
URL: https://mgt.dev/?path=/story/editor--editor
User ID: V-id
Tool: Accessibility Insight For Web

Repro Steps:

1. Open the above URL and login with valid credentials.
2. Press 'Ctrl+Win+Enter' keys to turn on Narrator.
3. 'Microsoft Graph Toolkit Playground' Overview page will get displayed.
4. Press tab key and navigate to 'Mgt-Person control and press enter key to activate it.
5. Now press tab key and navigate to the Properties option and press enter key to expand it.
6. Press down arrow key and navigate to More example option and press enter key to activate it.
7. Run the tool and observe the issue.

Actual Result:
Contrast between foreground and background for the Megan Bowen text is 3.86 which is less than 4.5:1.

Expected Result:
Color contrast ratio for the Megan Bowen text should be equal to or greater than 4.5:1.

Element path:
#storybook-preview-iframe;iframe;.styled-person,.line1[aria-label="Megan Bowen"][part="detail-line"]

Snippet:

Megan Bowen

How to fix:
Fix any of the following:
Element has insufficient color contrast of 3.86 (foreground color: #ff0000, background color: #fbfbfb, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1

User Impact:
It will impact the low vision user as they will not be able to see the text properly if the luminosity ratio is less than 4.5:1.

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

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