Split Button - Ensure active user interface components have sufficient contrast - (2036569851)

[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: Split Button - Ensure active user interface components have sufficient contrast - (2036569851)
• Module: Split Button
  Issue
  There is button icon "Transparent Inverse Actions" with a contrast ratio below 3.00:1.

Foreground: #FFFFFF
Background: #F8F8F8
The contrast ratio is: 1.1:1

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

Code Reference

<button aria-label="Transparent Inverse Actions" class="icon-end-empty" type="button"><calcite-icon class="icon icon--start" aria-hidden="true" icon="chevronDown" scale="s" calcite-hydrated=""></calcite-icon></button>

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/

Compliant Code Example

N/A

---

Additional Resources:

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

[geospatialem]

Currently we allow the use of a split-button where the appearance is "transparent" and the kind is "inverse", would this be out of scope for providing sufficient contrast and up to the designers/developer's discretion, or is this something we should consider to modify for color contrast purposes?

For instance: https://codepen.io/geospatialem/pen/rNRVOBK

[geospatialem]

For design consideration, please refer to #7784 (comment) cc @ashetland @SkyeSeitz

[SkyeSeitz]

The inverse kind +transparent appearance ensures an option is provided for buttons sitting on a colored surface defined by the user, such as brand for example. For transparent buttons sitting on the more common background or foreground.1, the brand, danger, & neutral kind values are available.

[geospatialem]

Closing based on Skye's comment above.