Seeking feedback on tag colors update

Question

Update May 22, 2024

Back in November, we requested feedback on our tag design. Among the options we presented, it became clear that Options #3 and #4 were the most favored by the community. Considering the upvotes and comments for both options, Option #3 was mentioned more frequently, even with some indecision.

We set a deadline for feedback and double-checked the comments at the time of our decision. Based on the feedback we received, we moved forward with Option #3. However, after the changes went live, we noticed increased interaction on this post. We temporarily locked the feedback request post to review and reassess the feedback.

Update May 21, 2024

This change is now live.

Update February 15th, 2024

Thank you for providing the requested feedback on the original post. From the discussion, it seems like Option 3 and Option 4 were more favorable. Therefore we have taken that into account and settled on Option 3 as the base style due to its cleaner aesthetic.

Since the base style is being updated, we’d also like to show some changes to other tag types that will address issues previously raised on Meta.

Required tags

This issue raised a concern that required tags on meta are too prominent and distracting. Now that the base style is being updated, we are proposing to rectify this by using the base style and adding a border to required tags. This also addresses the issue that the required tag appears too similar to a bounty.

Moderator tags

In addition to required tags, moderator tags will also be getting an update to match with the new base style. Moderator tags will remain orange with a border, but will have the bold text style. Therefore special tags such as required or moderator tags will have a border, while the regular tags will have the base style with no border.

Deleted Tags

The issue mentioned here was about the contrast between the previously light blue tag background and the red background for deleted posts. This will be updated with changes to the base style so that the tag background is gray and the bold text improves the contrast.

Watched Tags

The issue discussed here for watched tags was about the contrast. With the update to the base style, watched tags also now have a gray background on the yellow post background. The bold text increases the prominence of the tag against the background. We are also proposing to change the background color of the post in dark mode back to yellow, to further emphasize that the post has a watched tag.

Thank you again for the engaging discussion on the initial post and the proposed solutions. We appreciate the feedback! We plan to have these updates on Stack Overflow and across the Stack Exchange network during the next few months, and we will update this post once these tags updates are live. Stay tuned for updates!

---

With the delivery of our new colors, we deprecated our “powder blue”. We understand that the brightness of the post summaries once the tags started using the primary blue and the lack of hierarchy between the tags and the post title and link isn’t being received well. As promised, we are exploring options. Below you’ll find four options of tags. We are currently only working on the base style.

Option #1

Option #2

Option #3

Option #4

Once we identify a direction for the default tag, we plan to work through the other tag states, such as moderator, required, etc. For now, we ask that you provide any feedback you may have on these four options as well as sharing your preference, if one exists, that you may have toward a certain solution.

Answer 1

As commented, I think Web Accessibility should be a decisive factor in picking one over another option, so I'm not sure how helpful this question is at this stage (but see below).
That being said, you're asking for our preferences, and I can answer that. This is naturally very subjective.

---

I like the tags to be obvious when I am actively looking for them, but 'invisible' when I'm not.

So at this moment, and for purely aesthetic reasons (again, ignoring web accessibility), my preference is Option #3; both its Light as well as its Dark Mode options.

• Option #1 is screaming. It puts almost all the emphasis of the page on the tags, striking a non-functional hierarchy.
• Option #2 occupies too much space, and unnecessarily so. I'm also not a fan of the circular edges: smooth is fine, completely circular less so.
• Option #3, while similar to Option #2, changes these two unnecessary properties. The bold text makes it stand out sufficiently, without drawing too much attention.
• I like Option #4, but it's just a tad too subtle to be able to optically filter out.

However, I can imagine that the subtlety I speak of is experienced quite differently for the visually impaired, and that Option #1 is the most accessible.
It has been pointed out that accessibility among all options is similar.

Answer 2

I find having examples is really helpful to see design concepts directly, in context - so thanks so much for mocking these up for us!

The TL;DR is at the bottom after the horizontal rule.

Since I've got some time, I'll share my thoughts on the options presented but I'll try to also go into a bit more detail about the trees and the forest, if you will.

I generally see your designs showing several different options in a variety of configurations, which I (possibly wrongly) assume can be mixed and matched more than they currently are but are maybe worth calling out -

• Tag shape
  • 1 and 2 have oval tag designs
  • 3 and 4 have rounded square designs
• Text weight
  • 1 and 4 have normal weight
  • 2 and 3 are "bold"
• Tag color
  • 1 uses the primary site color (blue in this case, unclear if customized per-site or not)
  • 2 uses the page's background color (or white/black)
  • 3 has a shade of the background two steps lighter/darker than it
  • 4 has a shade of the background one step lighter/darker than it
• Tag decoration
  • 2 and 4 have borders
  • 1 and 3 do not

I don't think text color is configured, the only one that leaves me questioning is option 1 in light mode, where the text looks light blue on my screen but I'm guessing it's technically white.

Tag shape

I far prefer the rounded square shape in the latter two designs. I think it works better with the existing design aesthetic - the site design just generally tends towards rectangles rather than purely-round shapes and has for a while. The only thing I can think of that's purely rounded is the circles around the vote buttons, which is a (relatively) new change itself.

Considering your specific examples, using ovals makes this contrast between the accepted answer indicator and the tags feel a bit disjointed (to me):

Text weight

This feels like an aspect that's most likely going to impact accessibility, so I'm going to avoid weighing in here since that's not something I'm expert in. I don't have a strong feeling but I do find that insufficiently weighted text can lead to ambiguity in the text color (for me, anyway). I think that weight may also be impacted by the size of the tag/text.

Tag color

I think finding the right color for tags (particularly that will work network-wide and across different scheme modes), is likely going to be one of the more complex issues to solve and I have to admit, I see concerns with all four of the options presented, though I believe options 3 and 4 would work on 90% of sites... to explain:

Primary site color

Actually, before I get there, I'd ask - is this "primary site color", or is this "blue"? I'm assuming the former because the latter would be quite out-of-place on many network sites. If that's wrong, let me know in a comment.

I love using the theme to define the tag color in some way. We've slowly drifted from thoughtfully-crafted per-site tag designs (understandably) to where we are today. Having some per-site color option would be really nice to have. That said, I've worked through this with at least two design teams and... it's hard.

The "primary" theme color is not always a good fit for tags and it may not provide sufficient contrast, which leads to needing to customize the tag color on a subset of sites... which leads to special-casing and messy code... which I assume is kinda one of the things y'all are trying to avoid.

Beyond that, I think that these shades of the primary color are simply too bold. Tags are important but they're not that important. Example 1 for me seems to draw way more attention to the tags than the question title - and if I had to pick one thing to be the most important, it'd be the title.

Now, on a question page, this color choice might make the tags much easier to find - which can actually be helpful, but in a question list, I think both light and dark modes here are too eye-catching.

Background color (white/black)

For me, this has the opposite problem and an added complication. These feel too easy-to-miss and the simple border (see next section) and bold weight doesn't seem like enough to draw attention to them. While this allows the title to stand out strong on a question list, it might make the tags much easier to miss on a question page, which I sometimes struggle with already.

The complication is that not all site themes use white or black backgrounds, so if the intention was to use white, the tags would be quite different on sites like English Language & Usage, which has a cream background.

This is currently overcome in the question list by setting the background to match the div background, so a small concern but I figured worth mentioning.

Shade of the page background

Considering the note in the prior section, I think you might be guessing where I'm going with this - that using just a greyscale color (as opposed to a shade of the background), may cause design concerns on the handful of sites with non-white backgrounds. Here's a current example of light-grey on cream that's maybe not very accessibility-friendly:

As a tag, rather than in the list of related/linked questions in the sidebar, I'd feel a bit concerned that the contrast from the page background is insufficient without a border or going with a darker/browner shade to match the theme.

Otherwise, this is my preference of the options provided considering the complexity of using the site's primary theme color. Whether it's one shade off or two seems to be more a matter of accessibility, so I'll defer to the overall design and accessibility goals to determine that.

The shaded quality is a middle space - it increases the visibility of the tags without going overboard and (with the exception of handling the oddball sites), seems significantly simpler to set - and my uneducated brain imagines it'd be easier to meet accessibility contrast needs if there's no colors involved.

Tag decoration

I'm somewhat ambivalent about it but I lean towards the design with the border. I think the core need is ensuring the tags are easy to find on the page while also being sufficiently high-contrast for the text to be legible.

If we're looking at this as part of the full site design, I can see arguments for either side - we do use borders, but that's generally when there's no fill color and when there is a fill color, we often don't use a border (again, vote button selected states are outliers here).

Examples:

Questions without accepted answers have a border but no background color:

The closest existing example of option 3 I could find is the icons in the right sidebar for score of linked and related posts, which do not have a border.

So, for consistency, I'd say going borderless makes more sense in my mind.

---

In the end, I guess my answer is 3 would be my preferred option based on specific design combined with existing design choices, with the following caveats:

• I'm not an expert on accessibility
• I do wish there was something a bit themed with the design but understand the issues.
• I don't think the contrast of 3 in dark mode is sufficient to discern it from the black background as-is. The light mode seems much more distinct than dark mode for some reason.

I think 4 would be absolutely acceptable other than it not fitting the existing "elements have a background color or border decoration" design choice and was my preference before I wrote all of the stuff above. In the grand scheme of things, it was the consistency that led me to lean towards 3 but I don't think it's as strong of an argument as the argument regarding tag shape, so take that as you will.

Answer 3

Option #0, do not change anything.

The previous design was utterly superior in every single way to the one rolled out on May 21st, 2024. Way too much attention is now drawn to the tags themselves. This made the site look significantly uglier than before.

Another problem: the tags are now tiny or maybe they just appear smaller(?) because the text now takes up so much of the total button size. Tough luck if you like one-letter programming languages like c or r. Keep clicking and you'll eventually hit the tiny tag. There's around one million posts on SO using those 2 tags alone, so the existence of 1-letter tags should presumably not have come as a big surprise. Either way, it's bad design no matter if old or new. There needs to be a minimum size for a button and that shouldn't be based on the caption alone.

Kindly rollback this actively harmful change to the design used before 2024-05-21.

Answer 4

In broad terms, 4 works best for me. Nicely de-emphasised compared to all the others.
1 wants to be the centre of attention. I find the rounded ends in 2 take up too much space for no reason [& are far more likely to force a new line for the user name in a post header] & it also shares the bold text with 3, again too emphatic.

I wouldn't mind seeing some subtle hint of the site's colours. In that respect, the existing pale blue works for me here, and the red nicely draws attention without wanting to be the star of the show. The dark blue, on the other hand, I hate with a passion (sorry ;)

I don't ever use dark mode, so I have no opinion on that.

Edit 21.5.24 - seems they went with 3. Shame.
Bold makes no sense to me.

Answer 5

While tags are clickable links, in this context they aren't there to act as an interactable object on the page that people choose to click, it's information, just like how many votes the post has is information. For that reason, I don't think it should be as brightly colored/bold as it is in option #1.

Of the remaining options, I prefer option #4.

Option #3 fades into the background, particularly in light mode. I feel like things being as round as the tags are in option #2 looks dated.

Answer 6

I will only say my opinion on light theme as I cannot use dark.

• Option 1 - Absolutely the worst. We already have such prominent tags on Meta sites and it is beyond horrible to look at.

• Option 2 - Not good, circle corners waste space or make text stick to the borders too much. Bold with bigger letters is a bit too much for tags.

• Option 3 - Better than 2. because of shape and background color. Again bold letters are a bit too much.

• Option 4 - Looks fine to me. I wouldn't mind hint of color in the background (current blue from Stack Overflow is fine), beyond gray, but I could live with the gray, too.

Note: It can be very hard to get the actual look and feel by looking at the images as they may differ in actual size from what you get when browsing. So what might look acceptable on image (option 3) may turn out to be a complete no go in real life.

Answer 7

I think 1 stands out way too much (dislike). I don't have a huge preference between 2, 3, and 4.

My (non-major) concerns are with visual ambiguity with other things when using tag markup in posts:

• Particularly for 4, I'm concerned over visual ambiguity with keyboard markup ("<kbd>enter</kbd>", which renders like "enter")
• Particularly for 2, I'm concerned with visual ambiguity with inline code, though I suppose it's okay since inline code uses a monospace font family.

The color on main sites for tags in posts (Ex. discussion, chat) helps disambiguate (though on meta sites I think non-special-meta tags I think they're in greyscale).

Answer 8

feature-request

In most per-site metas common tags have black (and gray) cards; an example is Meta Physics SE.

But there are some sites that have colored common tag cards such as Meta Philosophy SE. And the color of tag cards are exactly the color used in Meta SE.

The deep blue (and light blue) colored tags in those per-site metas have two disadvantages:

1. When the tags are blue the links are like plain text, but when black we have colored (orange/brown) links (see the above examples and also this question). Of course, in Meta Quantitative Finance SE the no-contrast is between visited links and plain text.

2. With blue tags the per-site meta looks like a main site.

So please make all of the blue tags black in those per-site metas. All per-site metas are supposed to be universally lookalike.

Other examples include meta sites for Bitcoin SE, Spanish SE, German SE, French SE, Writing SE, etc. Note that in Bitcoin SE, both main and meta sites suffer the issue.

Answer 9

I mostly use dark mode. For me, the contrasts on options 2, 3, and 4 in dark mode are too subtle, at least looking at the mockups. OTOH, I agree that option 1 is too "loud". In light mode, options 2, 3, and 4 work OK, though the colouration is quite subtle. As to tag shape, I'm neutral — they all work for me. The boundaries are invisible to me in dark mode; they provide no benefit at the scale of the images that I'm looking at (which is on a 1920x1280 screen). If you can somehow make things more visible in dark mode, I like the idea of rounded tags with outlines, but I won't be worried about any of the other choices.

Answer 10

Option 1 is the one, IMHO. All the others are not utilizing colors as a eye-handled separators, because they lack contrast, especially on the dark theme. A hint: use not just blue, but orange, teal, etc. - soft but vibrant colors to avoid eyestrain.