[EuiCheckBox] The contrast ratio of unchecked checkboxes is below the WCAG threshold

[morhof]

WCAG success criterion 1.4.11 - non-text contrast - AA

Steps to reproduce

1. Open Dashboard

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,6:1,
  Toggle-switches 1,2:1.

Expected Result

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

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.11 - non-text contrast - AA
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

Relevant ARIA spec:
n.a.

[elasticmachine]

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

[nreese]

Closing, since these are EUI components, https://elastic.github.io/eui/#/forms/selection-controls#checkbox, and changes need to be made in EUI

[cee-chen]

Instead of closing, any objection to transferring/moving this to the EUI repo?

@1Copenut can you also chime in on this? I was personally not familiar w/ contrast ratio requirements for non-text elements. This feels like it'll impact many more things (such as EuiFieldText) etc. as well.

[cee-chen]

#6692 also seems related to this.

👋 Removing tags and transferring this to https://github.com/elastic/eui, along with several other EUI-specific issues

[1Copenut]

@1Copenut can you also chime in on this? I was personally not familiar w/ contrast ratio requirements for non-text elements. This feels like it'll impact many more things (such as EuiFieldText) etc. as well.

@cee-chen It very well might affect other components. The spec for SC 1.4.11 Non-text Contrast (Level AA)(https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) says elements must have a 3:1 color contrast ratio to adjacent colors. It's a hard one to spot for, so I'm glad a screenshot was provided.

In the example our light gray checkbox borders would need to be darkened so they are 3:1 with the white background. Same contrast ratio would apply for dark mode, but if we get one operating correctly, that gives us a starting point.

Spec 1.4.11 also has guidance that disabled elements do not have to meet the 3:1 threshold:

User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements in WCAG 2.1. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html#inactive-controls