Form - Ensure active user interface components have sufficient contrast - (2036570491)

[dqateam]

Violation:

Ensure active user interface components have sufficient contrast

WCAG Reference:

• 1.4.11 Non-test Contrast

Severity:

6

Media Type:

Color and Contrast

---

Areas for Remediation:

• Title: Form - Ensure active user interface components have sufficient contrast - (2036570491)
• Module: Form
  Issue
  There are form fields with a contrast ratio below 3.00:1.

Foreground: #949494
Background: #F8F8F8
Contrast ratio: 2.86:1

Examples of this user interface component include:

• Your name
• Will you be using Calcite components in an upcoming project?
• What is your favorite component(s)?
• Configuration
• Accessibility
• Ease of use

User Impact
Users with low vision will have difficulty identifying this content.

Code Reference

<input aria-label="Your name" class="" value="" enterkeyhint="" inputmode="" placeholder="John Doe" type="text">

Suggestion
Ensure active user interface components have sufficient contrast. The required minimum contrast ratio is 3.00:1.

Common examples of qualifying components include text field borders, checkmarks for checkboxes, fillings for radio buttons, focus indicators, and icon-only controls.

For borders, the "adjacent color" can be the color that touches the outside of the border or the color that touches the inside of the border. Contrast with both is not required.

Disabled controls that cannot be navigated to with the keyboard are exempt from this requirement.

Refer to the Accessible Color Picker extension or Color Contrast Checker site for assistance: https://www.accessibility.dev/

---

Additional Resources:

• Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.

[macandcheese]

Hard to tell the issue here. Is the referenced code from shadow root of calcite-input or just a native one? Our calcite-input should be using the correct input-border variable.

[geospatialem]

This looks to relate to the --calcite-ui-background in:

1. calcite-mode-light (#F8F8F8) with the outline of the input (#949494), where the contrast ratio is 2.85:1.
2. calcite-mode-dark (#353535) with the outline of the input (#757575), where the contrast ratio is 2.66:1

calcite-mode-light:

calcite-mode-dark:

[geospatialem]

Added context to the above epic, #7822.

Impacts the following components* using the --calcite-color-border-input CSS prop and border-color-input Tailwind util for:

• checkbox
• combobox
• input
• input-date-picker
• input-number
• input-text
• radio-button
• segmented-control
• select
• slider
• switch
• text-area

* Does not include composite components used as supporting children, such as input-time-zone or color-picker.

[geospatialem]

For design efforts, would like to confirm the above recommendation is in alignment across the design system and determine if any changes are needed with Figma prior to proceeding. cc @SkyeSeitz @ashetland

[SkyeSeitz]

Thanks, @geospatialem! The mentioned input.border passes on the expected foreground-1 surface. If higher contrast is needed on a different surface, the token is available for customization.

[geospatialem]

Closing based on Skye's comment above.