wordpress.org
wordpress.org copied to clipboard
WordPress
Choosing a new color for star ratings in the Plugins Directory and Forums
I am creating this issue to provide a more central location for discussion about the star color for reviews in the Plugins Directory and Forums. The discussion originated in WP Slack.
Recently, the Forums were refreshed, and the star rating color for plugins/themes was updated, first to black and then to pomegranate #E26F56, which is one of the secondary brand colors for WordPress.org. The color was changed because the original yellow color #ffc733 did not meet the accessibility requirements (3:1 UI contrast).
| Forums (current design) | Forums (previous design) |
|---|---|
A number of colors have been proposed. Here are a few:
| Star alternatives | Star alternatives |
|---|---|
You can also check out this Figma file for more options.
The pomegranate color is currently implemented both in Forums and in the demo site for the Plugins Directory refresh, so you can test this live. Share your thoughts on this issue.
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. 😅
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.
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 connotation and its compatibility with the website's theme.
