Accessibility: Plugin favorites heart color contrast failure
Closed this issue · 14 comments
On the plugin single page (Gutenberg plugin test page), the plugin favorites heart in its unselected state is #cbcdce on a white background which is 1:59:1.
Here's the contrast on WebAIM's checker. This fails for UI components and many people with low-vision will not even know that is there.
Because we don't want to fail Use of Color, it would not be sufficient to just darken the color of the heart. I'd recommend adding a border to it so it has a border and light or no color if unselected and a solid color if hovered or selected.
I like the star, and it makes "favoriting" things consistent with the new Patterns design.
While we should definitely fix this issue asap, I don't think it should block launching the new design since the color is the same as it is on the current theme.
I wonder if it would be mistaken with plugin reviews?
I wonder if it would be mistaken with plugin reviews?
That's true, but I think "staring" something is also a common way to favorite things. I am thinking about Slack and Figma.
Would it be possible to add a tooltip to the icon (like in the gif) that provides more context about what it is? Even with the current heart icon, it's not 100% clear what it does if you don't associate a heart with favoriting a plugin.
Thoughts @WordPress/meta-design?
Yep, good to have a tooltip.
Also, we could keep this star grey/black like it is in the Patterns refresh so it's visually different than the pomegranate star ratings for the plugins.
It might be helpful to make it more clear where to view favorites.
In the new design, there is a link in the local navigation.
There's a page in wp-admin where you can view a user's favorites (presumably yours, but there's no connection between wp.org and assorted WordPress sites). They also show up on your profile.
Maybe a little copy could be added to the favorites page, linking off to some documentation (like https://wordpress.org/documentation/article/plugins-add-new-screen/)? (Though this is getting into separate issue territory 🙂 )
I have a separate issue that I opened for larger functionality issues on this button beyond color contrast: #266
It probably makes sense for this to be part of that discussion, because the role needs to be changed anyway. I will add some additional thoughts there and link back to these comments.
I think we’re mixing three different concepts here. The actions I have noticed on the web when browsing and interacting with directories are:
- Liking: A +1 action to note preference. In many cases it influences the recommendation algorithm.
- Saving: Adding something to one or several collections. Those can be public or private.
- Rating: Scoring based on a scale. Sometimes, the evaluation is public and users can see their scorings.
The last two are currently on the WordPress site, unless I’m missing something. If we are using stars for rating, then we can not use it for saving. It would quickly lead to confusion.
There is no standard icon for saving, it swings between a heart and a bookmark. Therefore, the safest way to reduce misinterpretations is by adding a label next to it. In that vein, and following @ndiego's example, Figma also uses heart and bookmark for liking and saving, respectively.
Regarding preferences, I’m drawn to using a bookmark icon. The heart feels like an overrepresentation of the action as “love” is also conveyed with the heart.
The favorite action now uses the same component as Themes & Patterns, so the heart is inside a button, and is #656a71, which has a 5.4:1 contrast. It uses a different icon for favorited/unfavorited state, so the heart is filled if the if the current plugin/theme/pattern is favorited, and empty if not.
See #350 for details & some before/after screenshots.
It looks great. The loading animation was a nice solution 👏
Yeah, looks great! 👌