Skip to content

Input borders should meet the WCAG AA contrast ratio requirements #7509

@tkajtoch

Description

@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

Screenshot 2024-02-05 at 16 27 16

Metadata

Metadata

Assignees

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions