monaco-editor
monaco-editor copied to clipboard
microsoft
Luminosity ratio of the 'use device code' text is less than required ratio 4.5:1 present under 'Run script' tab.
Reproducible in vscode.dev or in VS Code Desktop?
- [x] Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
- [ ] Not reproducible in the monaco editor playground
Monaco Editor Playground Link
Monaco Editor Playground Code
const value = /* set from `myEditor.getModel()`: */ `function hello() {
az login --use-device-code
}`;
// Hover on each property to see its docs!
const myEditor = monaco.editor.create(document.getElementById("container"), {
value: "az login --use-device-code",
language: "shell",
automaticLayout: true,
});
<div id="container" style="height: 100%"></div>
Reproduction Steps
- Open link: Monaco Editor
- Monaco Editor page gets displayed.
- Open Accessibility insights for windows-color contrast tool.
- Select Foreground and Background color of the 'use device code' text using color picker.
- Verify whether Luminosity ratio of the "use device code" text present under 'Run script' tab which is less than required ratio of 4.5:1 or not.
Actual (Problematic) Behavior
Luminosity ratio of the "use device code" text present under 'Run script' tab is 3.996:1 which is less than required ratio of 4.5:1 in Windows.
Expected Behavior
Luminosity ratio of placeholder "use device code" text should be greater than or equal to 4.5:1 in Windows.
Additional Context
Test Environment: OS: Windows 11 Version 24H2(OS Build 26120.1542) Browser: Edge Browser 129.0.2792.31 Tools Used: Accessibility insights for windows-color contrast tool.
User Impact: Low vision users will not be able to read and access the information provided if luminosity ratio for text is not meeting required ratio of 4.5:1.
