[MGTP Person Card-Style - Custom size properties]: The Luminosity Contrast Ratio of ‘Email, message, video, audio…’ icons controls are '2.599:1' which is less than 3:1.

[Raisul123]

Test Environment: OS Build: Windows 11  Version: 24H2 (OS Build 26058.1400)  Browser: Edge dev  Browser Version 123.0.2400.1 (Official build) dev (64-bit) URL: Overview - Docs ⋅ Storybook (mgt.dev) Tool: Accessibility Insight for web

Repro Steps:

1. Open the above URL.
2. The ‘Microsoft Graph Toolkit Playground' Overview page will get displayed.
3. Navigate to the ‘MGTP-Person-Card’ and activate it.
4. Navigate to the ‘Style’ and activate it.
5. Navigate to the ‘Custom size properties’ and activate it.
6. Check luminosity ratio of ‘Email, message, video, audio…’ icons control with AI tool and observe the issue.

Actual Result: The Luminosity Contrast Ratio of ‘Email, message, video, audio…’ icons controls are '2.599:1' which is less than 3:1.

Expected Result: The Luminosity Contrast Ratio of ‘Email, message, video, audio…’ icons controls should be equal or greater than 3:1.

User Impact: Low vision users would face difficulty in seeing the icon controls if the color contrast ratio of the control is less than 3:1.

WCAG Reference: Understanding Success Criterion 1.4.11: Non-text Contrast | WAI | W3C

“ Have feedback on bugs logged, please tag bug as “A11yRCA“ and add your feedback in the comment section. “

Attachments:

[vagpt]

This issue is working fine, hence closing this issue.

URL: https://mgt.dev/next/pr/3174/?path=/story/components-mgt-person-card-style--custom-css-properties

Snippet: