-
Notifications
You must be signed in to change notification settings - Fork 138
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Choosing a new color for star ratings in the Plugins Directory and Forums #253
Comments
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. |
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. |
That's a great point that I completely forgot about. 😅 |
+1 for pomegranate |
I love that pomegranate |
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.
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. |
@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. |
Yeah, to my eyes, pomegranate is closer to orange than red.
ChatGPT 4 thinks so as well 😂
|
+1 Yellow |
Given the feedback above, I propose we move forward with cc @WordPress/meta-design @StevenDufresne @adamwoodnz |
Why not give the users the choice out of the options and let us pick a default here? |
+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 |
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? |
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. |
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).A number of colors have been proposed. Here are a few:
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.
The text was updated successfully, but these errors were encountered: