[Stateful: Home page] Low contrast on expanded Code editor

[L1nBra]

Description Content on the webpage has to be clearly visible with enough contrast and elements should not overlap on one another - thus confusing user.

Preconditions Stateful Home page (Overview) is opened. Switch is enabled for Security Privileges.

Steps to reproduce

1.Navigate to New button. 2.Click New button. 3.Navigate to Code editor in Security Privileges section. 4.Click Expand button. 5.Observe expanded Code editor.

Expanded Code editor

Actual Result

• Expanded editor overlay is hardly visible - not enough contrast. Hard to read the text, the buttons cannot be seen for copy and collapse. Main page is visible behind Code editor and that's why text, buttons of editor are overlapping with main page elements. Color of copy and collapse buttons: rgb(52, 55, 65). Colors of the code inside editor: symbols of grey color rgb(105, 112, 125), red text rgb(189, 39, 30), blue text rgb(0, 113, 194). Same behavior with Metadata editor.

Expected Result

• When editor is expanded it should be also clearly visible what and where to do, what actions can be performed, without text, buttons being on top of other elements. Text, symbols, buttons on the editor should have a contrast of minimum 4.5:1 to background.

Notes: Contrast on collapsed editor meets the criteria. It is only an issue when editor is expanded.

Meta Issue

Kibana Version: 8.16.0-SNAPSHOT

OS: Windows 11 Pro

Browser: Chrome Version 129.0.6668.70 (Official Build) (64-bit)

WCAG or Vendor Guidance (optional)

• Understanding SC 1.4.3: Contrast (Minimum) (Level AA)(https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)

Related to: https://github.com/elastic/search-team/issues/8256

[elasticmachine]

Pinging @elastic/kibana-accessibility (Project:Accessibility)

[L1nBra]

Even though contrast issues are defined under level AA accessibility success criteria, this specific issue is serious, because it is hard for any person to see information on expanded code editor.