Input borders should meet the WCAG AA contrast ratio requirements
tkajtoch opened this issue · comments
Describe the problem
According to the recent kibana issue EUI input fields borders have contrast ratios below 3:1 and don't meet the WCAG AA contrast ratio requirement.
The same may apply to other components like EuiTextField, EuiSearchField, EuiSelect, and more.
To Reproduce
Go to https://eui.elastic.co/#/forms/form-controls#text-field and measure EuiTextField border contrast ratio.
Environment
- Operating System: MacOS 14.2
- Browser: Chrome 121
- Environment: production
Proposed solution
Increase affected components' border contrast ratios to 3:1 or above.
Screenshots or Trace Logs
Worth noting: the password component is dark enough to pass the contrast check - why is it a one-off?
Worth noting: the password component is dark enough to pass the contrast check - why is it a one-off?
I noticed that this is true when the dual, or preppend or append parameters are set to true. It seems that this happens because the background of these added elements use a lighter gray (which is the same as the field's border)