monaco-editor icon indicating copy to clipboard operation
monaco-editor copied to clipboard

Luminosity ratio of the 'ID' text is less than required ratio 4.5:1:A11y_MonacoEditor_Color Contrast

Open AnKushSingh05 opened this issue 6 months ago • 1 comments

GitHubTags:

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

Environment Details:

#URL: Monaco Editor (microsoft.github.io) Application name: Monaco Editor Chrome: Version 131.0.6778.205 (Official Build) (64-bit) Windows 11 Enterprise (Version 23H2)   OS Build 22631.3737

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. TAB to code editor and inspect it.
  3. Observe that Name property is not provided for "Code editors" present in the Monaco editor

Actual Results:

Luminosity ratio of the 'ID' text is less than required ratio 4.5:1.

Expected Results: Luminosity ratio of the 'ID' text should be greater than or equals to 4.5:1

User Impact:

Most people find it easier to read text when it has a sufficiently high contrast against its background. People with visual disabilities, low vision, limited color perception, or presbyopia are likely to find text unreadable when contrast is too low.

Attachment:

Image

AnKushSingh05 avatar Jun 13 '25 10:06 AnKushSingh05

@AnKushSingh05 Do we have any tentative ETA for the bug fix as extension team is looking for fix update/ETA

Kirank915 avatar Aug 07 '25 07:08 Kirank915