Star Rating Icons Where Filled and Empty Look Too Similar

Why it matters

A renter checking a car's 4-star rating can't tell where the filled stars stop and the empty ones begin.

How to test

Measure the difference between filled and unfilled star icons in a rating widget: below 3:1 makes the current rating unreadable.

How to fix

Pick filled and empty states from different hue families, or with enough lightness difference to clear 3:1.

.star.filled { fill: #f5a623; }
.star.empty { fill: #d9d9d9; }

Outcome

A renter reads the 4-star rating at a glance instead of squinting to count faint stars.

Who is affected

Low-vision and color-blind users can't distinguish a car's actual star rating from this near-identical pair of yellows.