Input borders should meet the WCAG AA contrast ratio requirements

[tkajtoch]

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

[cee-chen]

Worth noting: the password component is dark enough to pass the contrast check - why is it a one-off?

[kyrspl]

@cee-chen

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)