Is there a Needs Accessibility label?

For accessibility, any of the proposed options are viable. The potential problem with the outlined option would be insufficient difference between the filled star and the empty star, but omitting the border on the empty resolves that.

For style, I prefer the yellow with an outline.

⭐ ️ I vote yellow star with outline! 🗳️

EDIT: I vote pomegranate due to the comment quoted below (FYI, at the time of editing, my previous comment had 3 thumbs-up emoji votes)

Would the color we pick also apply to the rating bars? I'm not sure that yellow-with-border would work well here.

And to share my opinion— I like the pomegranate stars 🙂

The potential problem with the outlined option would be insufficient difference between the filled star and the empty star, but omitting the border on the empty resolves that.

This was my first thought as well. +1 yellow star w/outline (1st) or pomegranate (2nd).

While I agree that the yellow star with the border looks nice, there are some dev considerations. Implementing this option will not be as straightforward as switching out colors. Coupled with the fact that pomegranate is a secondary brand color, my vote is for pomegranate.

Would the color we pick also apply to the rating bars? I'm not sure that yellow-with-border would work well here.

And to share my opinion— I like the pomegranate stars 🙂

Would the color we pick also apply to the rating bars? I'm not sure that yellow-with-border would work well here.

That's a great point that I completely forgot about. 😅

+1 for pomegranate

I love that pomegranate #E26F56 color.

I use dark mode. Things like this tend to not show up. Can you show the examples in dark mode?

Pomegranate works well in that it's a flat color, which vibes with most other iconography, yet it passes contrast, and it's part of the website brand .

@lada7042

I use dark mode. Things like this tend to not show up. Can you show the examples in dark mode?

The website doesn't yet have official dark mode built-in, though I'd like to see that happen at some point in the future. Openverse has incoming dark mode support, I would expect that wp.org could follow the same model. There are designs for Openverse dark mode here .

That said, the pomegranate works well on dark backgrounds, here's an example:

As noted, on white the color exceeds the minimum 3:1 contrast by achieving 3.16:1. On the dark background it surpasses that with a comfortable 4.7:1 contrast ratio. Tested using Contrast Tools .

Figma , for anyone who wants to tinker.

For accessibility, any of the proposed options are viable. The potential problem with the outlined option would be insufficient difference between the filled star and the empty star, but omitting the border on the empty resolves that.

For style, I prefer the yellow with an outline.

@joedolson How do you feel about the images with a 1/2 star? Border or no border on the empty half?

I'm thinking no border to keep things more simple visually.

I inquired about the various color options with a friend who cannot see gradients of color, only "blue" or "orange", not shades of these. The friend's preference was for the pomegranate as well.

In Joen's last reply, the pomegranate strikes me as nearly orange, not feeling red. This is good in the context of the forums. Red could connotate frustration for at least many English speaking locales. I don't have experience with emotional representation in colors in other regions.

In Joen's last reply, the pomegranate strikes me as nearly orange, not feeling red.

Yeah, to my eyes, pomegranate is closer to orange than red.

• #FF0000 - Red
• #E26F56 - Pomegranate
• #ffa500 - Orange
• #ffc733 - Old yellow

ChatGPT 4 thinks so as well 😂

The color represented by the hex code #E26F56 is closer to orange. This hex code produces a shade that is often described as a soft or pastel red-orange, leaning more towards orange due to its warm and bright characteristics.

+1 Yellow

Given the feedback above, I propose we move forward with #E26F56 so as not to block the Plugin Directory refresh launch but keep this discussion open for a potential future update. Please continue to share your feedback here 🙏

cc @WordPress/meta-design @StevenDufresne @adamwoodnz

Why not give the users the choice out of the options and let us pick a default here?

I like the pomegranate but have some concerns. Technically, if we're always outputting the text (4.5 out of 5 stars) then these are decorative and don't have to pass anything and can be hidden from screen readers.

When we have scenarios like this, though, where sighted people have no text equivalent, they should pass AA at a minimum.

Arguably, in this instance, they don't count as a UI component but as something meant to function as a text equivalent. I.e., the average star rating of a plugin is really important for many people when selecting plugins. If we consider the importance of these stars, the pomegranate fails on white because it's not at least 4.5:1.

IMO, an improvement here, if you didn't want to have to make the stars darker, would be to have the stars (in any color) and text in a color that passes 7:1 (AAA) to the right of the stars.

+1 for pomegranate.

I also really like the idea of outputting the rating in text. While not within the scope of this issue, in addition to accessibility, it could also improve schema markup.

Having the rating in text would be great. It used to be available via a title attribute, which was removed because it's not an accessible way to communicate information, but it should have been added in text at the same time. See https://meta.trac.wordpress.org/changeset/3792

If we consider the importance of these stars, the pomegranate fails on white because it's not at least 4.5:1.

As UI elements that are relatively large (equivalent to 18pt text) I'd love to understand why these would need to meet 4.5:1 text contrast vs. 3:1 UI/large text contrast.

That said, I'd also like to see adjacent text next to every instance of the stars. It could be as simple as ★★★☆☆ (3/5).

They aren't large text; they're 20px. Large text is equivalent to 18pt, which is approximately 24px. Since they're icons, it's kind of hard to make that equivalency - they have completely different concepts of line and fill than a text font would.

I don't think WCAG provides any real guidance on how to assess the color contrast of icons used to communicate information; by that standard, this is more equivalent to an image like a graph or chart, and alt text would generally be considered sufficient there.

Honestly, it would be much better to ignore the whole question of whether and how WCAG covers this particular scenario and just have the rating visible in plain text.

Another thing to consider may be new changes that come to the WordPress Admin - which colors will work best based on the default color scheme there?

The use of the orange/pomegrade color for Stars is probably a bit subjective, but often red-ish colors in the context of ratings/reviews is perceived as a negative, not a positive.

Current color:

Also, looking through the whole new homepage and rest of the site, there is no use of an accent color at all, it's all just shades of blue, grey, and black.

But I can see that using blue or black for the stars is also not sufficient.

But in reviewing the color pallete in the stylesheet, I see a reference to a nice green:
#00d084 --wp--preset--color--vivid-green-cyan

Here's what that looks like on the Plugins page:

Here's what it looks like on the single plugin page:

Again, color schemes can be subjective for sure, but the way in which the current orange/red evokes a negative connotation I don't find to be ideal, or the best color choice in the context of the rest of the website. The green I feel is more of a natural fit both for connotation and in the broader context of the whole website.

Color schemes are certainly subjective, but I don't think the current orange/Pomegranate hue gives off the best impression. Its association with negativity doesn't seem ideal, especially considering the overall aesthetic of the website. Personally, I find incorporating green for the rating icons and bars would be more suitable, both in terms of co nnotation and its compatibility with the website's theme.