Rating - Ensure parts of graphical objects essential for understanding content have sufficient contrast - (2036570022)

[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: Rating - Ensure parts of graphical objects essential for understanding content have sufficient contrast - (2036570022)
• Module: Rating
  Issue
  There are graphical objects with a color contrast ratio below 3.00:1.

Foreground: #EDD317
Background: #F8F8F8
Contrast ratio: 1.4:1

Examples include:

• Test 2. Average Rating
• Test 3. Average with chip

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

Code Reference

<svg class="svg" fill="currentColor" height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg">
...
</svg>

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]

For design consideration, should we accommodate color contrast with rating, or does the outline of each item provide sufficient contrast and we can close the above? cc @ashetland @SkyeSeitz

[SkyeSeitz]

Thanks, @geospatialem. Would like to explore a potential change to the yellow star color displayed for the average prop.

[jacqueskeet]

During the exploration of this, we realised that the Read-only property of this component is missing. We should explore adding it back as part of this ticket. Here's a design example of what it should look like.

[jacqueskeet]

Following the design exploration, we decided to update the global warning color used in the Rating component. The Warning token color has been adjusted, providing sufficient contrast with the Rating component.

Link fo Figma:
https://www.figma.com/design/rkpMoRvtpYb9SD9dYHXg2i/%5BRating%5D-star-color-accessibility?node-id=547-8706&t=AEBuNETvNwMxHt82-4

We're aware that this is a global change hence we identified two potential risks associated with this change:
1. other components that uses this color;
2. a potential contrast issue next to the danger color;

We looked at the components that are using the Warning color and found that there’s no immediate issues.

We also ran a few visual impairment contrast tests between the same components using the new warning color and the danger color and found that there’s no issues as well.

Example of Protanopia

[github-actions]

cc @geospatialem,. @brittneytewks

[github-actions]

cc @geospatialem, @brittneytewks

[SkyeSeitz]

During the exploration of this, we realized that the Read-only property of this component is missing. We should explore adding it back as part of this ticket...

As mentioned above, in addition to updating the warning colors, can we also implement an updated read-only styling to improve distinction? This change would use the star-f icon with a border.1 fill to distinguish itself from the outlined star used in the default state.

[jcfranco]

@geospatialem @SkyeSeitz @jacqueskeet Can we create a separate issue for the design improvements (e.g., read-only support, global warning color tweak)? This was originally scoped to the contrast of the existing design. Alternatively, we could repurpose this issue to focus on the improvements and add the a11y requirements to the acceptance criteria if that’s preferable.

[SkyeSeitz]

Good thought, Franco. Since a design re-work is needed in order to address the a11y issue, I would be in favor of repurposing this issue with a11y requirements to the acceptance criteria.