search

elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.48k stars 8.04k forks source link

(Accessibility) The contrast ratio of input fields border is below the WCAG threshold #176219

Open morhof opened 5 months ago

morhof commented 5 months ago

WCAG successs criterion 1.4.11 - Non-Text Contrast - AA

Steps to reproduce

  1. Click on Dashboard
  2. Click on Search field

image

Actual Result

The following contrast ratios of interactive elements do not conform to the minimum contrast requirements of 3:1. Therefore, these elements are more difficult to perceive, and may be completely missed by users with low vision: Borders of checkboxes 1,2:1

Expected Result

Between foreground and background, the minimum contrast ratio should be 3:1

Meta Issue n.a.

Kibana Version: 8.11.2

OS: Microsoft Windows 11 Enterprise 64bit 22H2 (10.0.22621.3007)

Browser: Chrome Version 121.0.6167.140

Screen reader: [if relevant] n.a.

Relevant WCAG Criteria: WCAG success criterion 1.4.11 - non-text contrast - AA https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

Relevant ARIA spec: n.a.

elasticmachine commented 5 months ago

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

elasticmachine commented 5 months ago

Pinging @elastic/kibana-presentation (Team:Presentation)

elasticmachine commented 5 months ago

Pinging @elastic/eui-team (EUI)

1Copenut commented 4 months ago

Thank you @morhof for filing this issue. We've been discussing and do feel this is an area for improvement. My colleague has filed an improvement ticket in our EUI design system repository to improve form input contrast. After that fix is integrated into EUI, it will be folded into a future release of Kibana.