[Bug]: RatingDisplay: unfilled stars do not have enough contrast between them and the background

[gouttierre]

Component

RatingDisplay

Package version

latest

React version

latest

Environment

- Browser and OS versions:  All? Windows + Edge

Current Behavior

Our MS Security Accessibility team flagged these unfilled icons to not be accessible against their backgrounds. They suggested that we put a stroke on them or use the Rating component outline to enhance the contrast.

Please provide an isolated reproduction of the issue in a codepen or url:

• Available on Storybook sample: https://react.fluentui.dev/?path=/docs/components-ratingdisplay--docs

Actual behavior:

• Does not meet contrast ratio between the unfilled icon and background

Expected Behavior

• Should have enough contrast.

Documentation describing expected behavior (Optional):

• Nathan Sokol's team was curious about why the unfilled stars from the Rating component weren't used here. They believe it would enhance accessibility and are willing to contribute a PR.

Reproduction

• https://react.fluentui.dev/?path=/docs/components-ratingdisplay--docs

Steps to reproduce

• Go to ratingdisplay

Pre-Investigations

• Valentyna did investigations and saw that marigold has ratio 2:07 in the storybook and 2:16 with white background. There's darker color in our palette but it has 2:64 ratio, it should be at least 3:1. it's colorPaletteMarigoldForeground3: #eaa300. Will need to loop in designers about colors because darker one would look worse.

  Current color:

  Darker color that meets 3:1 ratio:

Are you reporting an Accessibility issue?

yes

Suggested severity

High - No workaround

Products/sites affected

All

Are you willing to submit a PR to fix?

yes

Validations

• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] The provided reproduction is a minimal reproducible example of the bug.