search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
280 stars 76 forks source link

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

Open dqateam opened 11 months ago

dqateam commented 11 months ago

Violation:

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

image

WCAG Reference:

Severity:

5

Media Type:

Color and Contrast

Areas for Remediation:

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

Examples include:

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:

geospatialem commented 4 months ago

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 commented 4 months ago

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

jacqueskeet commented 3 months ago

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.

Rating - Read only
jacqueskeet commented 1 month ago

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

image

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.

image

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 image

github-actions[bot] commented 1 month ago

cc @geospatialem,. @brittneytewks

github-actions[bot] commented 1 month ago

cc @geospatialem, @brittneytewks

SkyeSeitz commented 1 month ago

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.

image