{Freeway-Bug}[MGTP-Mgt -agenda -Style -Custom CSS properties’ page]: The Luminosity Contrast Ratio of ‘Tuesday, 27 February, 2024’ Text is '4.3:1' which is less than 4.5: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 ‘Mgt -agenda’ and activate it.
4. Navigate to the ‘Style’ and activate it.
5. Navigate to the ‘Custom CSS properties’ page control using tab key and activate it.
6. Navigate to " Tuesday, 27 February, 2024" text
7. Check luminosity ration with AI tool and observe the issue.

Actual Result: The Luminosity Contrast Ratio of ‘Tuesday, 27 February, 2024’ Text is '4.3:1' which is less than 4.5:1.

Expected Result: The Luminosity Contrast Ratio of ‘Tuesday, 27 February, 2024’ Text should be greater than or equal to 4.5:1

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

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

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

Attachments:

[gavinbarron]

@Raisul123 There's some strange stuff going on with Accessibility insights here as the color of the text as it is set via CSS is different to what AI is reporting:

We'll adjust our colors to address the color contrast issues reported here.

[vagpt]

Hi @gavinbarron,

Could you please let us know in detail about the above comment as we have checked again and getting the same issue.

[vagpt]

This issue is working fine on the URL below, hence closing this issue.

URL:

https://mgt.dev/next/pr/3179/?path=/story/components-mgt-agenda-style--custom-css-properties

Snippet: