Stepper and Stepper Item - Ensure parts of graphical objects essential for understanding content have sufficient contrast - (2036570231)

[dqateam]

Violation:

Ensure parts of graphical objects essential for understanding content have sufficient contrast

WCAG Reference:

• 1.4.11 Non-test Contrast

Severity:

5

Media Type:

Color and Contrast

---

Areas for Remediation:

• Title: Stepper and Stepper Item - Ensure parts of graphical objects essential for understanding content have sufficient contrast - (2036570231)
• Module: Stepper and Stepper Item
  Issue
  The "Complete" icon with a color contrast ratio below 3.00:1.

Foreground: #FFFFFF
Background: #7CB9DD
The contrast ratio is: 2.1:1

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

Code Reference

<svg class="svg" fill="currentColor" height="100%" viewBox="0 0 16 16" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 1.2a7.3 7.3 0 1 0 7.3 7.3 7.3 7.3 0 0 0-7.3-7.3zm-.943 11.251L4.452 9.346l1.02-1.022 2.085 2.09 4.77-4.771 1.02 1.02z"></path></svg>
[Css]
:host([complete]) .container .stepper-item-icon {
   color: var(--calcite-ui-brand);
}

Suggestion
Ensure parts of graphical objects essential for understanding content have sufficient contrast. The required minimum contrast ratio is 3.00:1.

Common examples of qualifying objects include lines in a chart, meaningful icons, and annotations within an image.

Graphics that require particular presentation to preserve their meaning are exempt from this requirement.

To evaluate color contrast, see the Accessible Color Picker extension: https://www.accessibility.dev/

---

Additional Resources:

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

[geospatialem]

Added light mode context to #7839 for design expertise on next steps.