Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds: A11y_MonacoEditor_Color Contrast

[AnKushSingh05]

Monaco Editor Playground Link

https://microsoft.github.io/monaco-editor/playground.html?source=v0.52.2#example-customizing-the-appearence-tokens-and-colors

GitHubTags:

#A11yTCS; #A11ySev2; #A11yMAS#Desktopweb; #Win11; #Visual Studio Code Client; #VisualStudioCode-Web-Apr2021; #Chriumedge; #a11y-monacoeditor;#PartnerBug;#WCAG1.4.3;#ColorContrast;

Environment Details:

#URL: Monaco Editor (microsoft.github.io)
Application name: Monaco Editor
Chromium edge: Version 139.0.3405.125 (Official build) (64-bit)
Windows 11 Enterprise (Version 24H2)  
OS Build 26100.5074

Repro Steps:

1. Hit the URL: https://microsoft.github.io/monaco-editor/playground.html?source=v0.37.0-dev.20230304&compareWith=v0.51.0-dev-20240807#XQAAAAI-AgAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscw0uYPhVciAJM8XEuX7Os378jBGtVLkr6ryuhqvky-XZ9Sy0vyFSI1m9lYQpwqOsaKmhydYWIo-9hGbv_4wlPIsEpVooDN3UCJMd4tcEd9VUzQ9EESrCIYT47A4aTEQQSmM6tHbTXJb9UMEl_GJzFV3aYp-m_THmQirxqkXSWTCnxaR6Q9HbOc4o_nyORmEdKNxkBNb4rPtStLS0T0kJQC3tdwY0PzFT2FRWDB81Ska
2. Monaco editor page will appear.
3. Run AI4W
4. Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds (.mtk9.mtki.mtku:nth-child(4))

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)

Target application:

Monaco Editor - https://microsoft.github.io/monaco-editor/playground.html?source=v0.52.2#example-customizing-the-appearence-tokens-and-colors

Element path:

iframe;.mtk9.mtki.mtku:nth-child(4)

Snippet:

<!-- // !!! Tokens can be inspected using F1 > Dev

How to fix:

Fix any of the following:
Element has insufficient color contrast of 1.97 (foreground color: #ffa500, background color: #fffffe, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1

Environment:

Microsoft Edge version 139.0.0.0

This accessibility issue was found using Accessibility Insights for Web 2.46.0 (axe-core 4.10.2), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Attachment: