(Accessibility) The contrast ratio from text to background is below the threshold - example 3

[morhof]

WCAG success criterion 1.4.3 - contrast (minimum) - AA

Steps to reproduce

1. Click on Management
2. Select Dev Tools

Actual Result

• In the application, some text content is not easy to read because the contrast ratios are below the minimum contrast ratio of 4.5:1

Expected Result

• Between foreground and background a minimum contrast of 3:1 for large font and 4.5:1 for small font (font size below 18pt or below 14pt in bold font) should be observed.

Meta Issue n.a.

Kibana Version: 8.3 OS: Microsoft Windows 10 Enterprise (64-bit) Browser: Google Chrome 109.0.5414.75 (64-Bit)

Screen reader: n.a.

Relevant WCAG Criteria: WCAG success criterion 1.4.3 - contrast (minimum) - AA https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

Relevant ARIA spec: n.a.

[elasticmachine]

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

[bhavyarm]

cc @1Copenut - https://github.com/elastic/kibana/issues/154423 is similar issue.

[elasticmachine]

Pinging @elastic/platform-deployment-management (Team:Deployment Management)

[ElenaStoeva]

Hi @morhof, thanks for reporting this a11y issue! We opened https://github.com/elastic/kibana/pull/169697 to fix the low contrast ratio of the text inside the page.

Regarding the tabs, please keep in mind that the tabs in your screenshot are disabled, and this is the default colour of disabled tabs in Kibana as per EUI. When they are enabled, there is no issue with low contrast ratio:

Making the disabled tabs in darker colour might confuse the users that the tabs are active. Also, according to WCAG 2.2, there is no contrast requirement for text in inactive UI components:

[RalfO99]

Hi @ElenaStoeva , as @morhof is out of office: We'll have a look at your comment / hint on the inactive tabs. Thanks for keeping on to fix the bugs and keeping us in the loop.