52

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.

Example of required tag button with an added boarder to indicate its prominence, but not distract.

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.

Example of a moderator tag in orange with a boarder and bold text.

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.

Example of the improved contrast on deleted tags with a tag background that is gray and bolded text

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.

Examples of Watched tags having a gray background on the yellow post background, with bolded text.

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 Mockup of Questions landing page using pill shaped bold blue tags with white copy in light mode Mockup of Questions landing page using pill shaped bold blue tags with black copy in dark mode

Option #2 Mockup of Questions landing page using pill shaped white tags with light grey outline and bold black text in light mode Mockup of Questions landing page using pill shaped black tags with dark grey outline and bold white text in dark mode

Option #3 Mockup of Questions landing page using light grey tags with rounded corners and bold black text in light mode Mockup of Questions landing page using dark grey tags with rounded corners and bold white text in dark mode

Option #4 Mockup of Questions landing page using light grey tags with rounded corners and mid grey outline using black text in light mode Mockup of Questions landing page using dark grey tags with rounded corners and mid grey outline using white text in dark mode

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.

30
  • 11
    What do you know about the differences in web accessibility between these designs? No matter what aesthetic preferences, that should play a large role.
    – Joachim
    Nov 29, 2023 at 14:13
  • 4
    There are only regular light/dark mode examples. Does that mean there would be no planned changes for high contrast modes?
    – VLAZ
    Nov 29, 2023 at 15:14
  • 124
    Anything other than option 1
    – Kevin B
    Nov 29, 2023 at 15:22
  • 72
    I prefer options 3 or 4. Option 2 is worse (tags are not prominent enough). Option 1 is the worst (tags are way too prominent). Nov 29, 2023 at 16:12
  • 11
    We need to see a what meta-tags (such as [discussion] on this post) look like too. Nov 29, 2023 at 16:22
  • 7
    The first option is not good, because this. Nov 29, 2023 at 16:39
  • 6
    And how are moderator tags, for example featured or status-declined? Nov 29, 2023 at 16:41
  • 2
    @Зонтик See the last paragraph. :)
    – Catija
    Nov 29, 2023 at 17:07
  • 7
    Not exactly relevant to tags, but FYI: the words "Stack Overflow" in the logo are basically invisible in dark mode in your screenshots
    – cocomac
    Nov 29, 2023 at 19:10
  • 6
    Thank you for this! As the person who brought it up, I'd be happy with either option 3 or 4. Neither 1 or 2 pass the bar for me as someone else said; option 1 has too much contrast and option 2 has not enough contrast, respectively.
    – TylerH
    Nov 30, 2023 at 15:18
  • 4
    @Joachim Accessibility is similar across the options
    – Piper Staff
    Dec 1, 2023 at 14:53
  • 5
    I would go with Option 4, as that one is the most consistent with the styling of the rest of the site. The slightly rounded rectangle matches the buttons, the search bars, and the other UI elements. The pill/oval shapes in Option 1 and Option 2 would just feel out-of-place.
    – CPlus
    Dec 3, 2023 at 18:55
  • 7
    Option 4 best, 3 is ok. The roundedness of 2 seems out of place, and Option 1 seems like it's there mostly to encourage people to vote for other options :p Dec 4, 2023 at 2:30
  • 5
    As someone with poor eyesight, I can't see from far away, option 3 is perfect. Dec 5, 2023 at 3:30
  • 19
    "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.". That's... Not how meta works. This isn't email, and this isn't a uni-directional medium for sharing ideas. I hope that you all recognize the first and second order effects of your actions on this post and re-think your approach for the future. yesterday

10 Answers 10

81

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.

14
  • 10
    3 is my favorite too, I like it over 4 because of the lack of borders.
    – GammaGames
    Nov 29, 2023 at 15:53
  • I'm struggling with your description of 4. It takes the least space of all [ignoring 1, which is completely over the top] & is square-sided. See the gif in my answer below for relative sizes/quick comparison. meta.stackexchange.com/a/395115/276027 That & your description of 2 makes me think you have them numbered in a different order to everyone else.
    – Tetsujin
    Dec 1, 2023 at 18:30
  • 3
    @Tetsujin You're absolutely right: I mixed up #2 and #4. Edited. Thanks for pointing it out!
    – Joachim
    Dec 1, 2023 at 18:58
  • 4
    Glad we got that sorted. What does still bother me is that 36 people agreed with you already… without actually knowing which ones you were talking about. That's kind of disturbing. Having said that, I've been looking at this for 2 days now & only just 'plucked up the courage' to mention it ;)
    – Tetsujin
    Dec 1, 2023 at 19:15
  • 3
    @Tetsujin I was thinking the same thing. On the other hand, maybe those people also simply prefer Option #3, and the rest was just a bonus. (And please don't hesitate with mentioning those things: I always welcome constructive criticism :)
    – Joachim
    Dec 1, 2023 at 19:44
  • Do you actually know that #1 is the most accessible option? If so, can you edit the post to explain why? Because I had pegged #1 as the worst of the four designs for reasons already mentioned in other answers, and I think a suggestion to ignore that and choose #1 anyway purely on the basis of accessibility needs a pretty good justification behind it.
    – David Z
    Dec 3, 2023 at 6:25
  • @DavidZ But I'm not at all saying that. I wrote "I can imagine" "that Option #1 is the most accessible", simply because it stands out the most. If that would have turned out to be the case, this whole discussion would have had to be reconsidered (hence the link to my initial comment: this is an important aspect of UI/UX design, but it was not mentioned at all by the OP).
    – Joachim
    Dec 3, 2023 at 11:47
  • @Joachim I see... well, I misunderstood that sentence. Something about the phrasing you used made it sound to me as though it was trying to lead people to think that option 1 was the best choice because of its accessibility, even though it didn't say so directly. Anyway, the edit helps.
    – David Z
    Dec 3, 2023 at 21:26
  • @DavidZ I get the misunderstanding, I have a tendency to write in convoluted ways, so no worries. Glad to hear the edit helps.
    – Joachim
    Dec 3, 2023 at 23:58
  • 1
    Pick #3 m'lord youtube.com/watch?v=dWEr8JPjNs0
    – TKoL
    Dec 6, 2023 at 14:20
  • 1
    I could go with either #3 or #4. I think #3's light theme is better than #4's, but the dark theme is good for both IMOP.
    – Timothy G.
    Dec 7, 2023 at 14:20
  • 2
    @Joachim honestly, are you satisfied with this tag coloring change of tags?
    – Jonas
    yesterday
  • @Jonas Not entirely, no :) I think it's darker than the example, and a little too dark/bold still, anyway. But I also still think #3 is the best of the options given, which is what this question was about.
    – Joachim
    yesterday
  • @Jonas To elaborate, given that I'm starting to get downvoted because some users don't like this change: note that my answer, while being the most upvoted one, was not an invitation to make this change as a matter of course. The four options given were an "exploration" to see what "direction" staff could take with a design update. I only pointed out what the best of these options was, not that it was simply a good idea to take that route, as the downvoters seem to suggest, now that the change has taken place.
    – Joachim
    14 hours ago
47

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):

rounded square green area around "2 answers" contrasts with the oval tags.

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.

Tags on English Language & Usage - beige background on a cream page

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.

Question showing "1 answer" in green text on a cream background with a green rounded-square border.

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:

Related question score counts on English Language & Usage. A question without accepted answer's score has a light grey background, which is very similar to the page's cream background.

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:

Question list showing two questions, one with accepted answer and one without. The question with an accepted answer has "2 answers" in a green borderless rounded-corner rectangle while the one without an accepted answer has "2 answers" on a white background with green text and a green border

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.

Rounded rectangle areas with a light-grey background and a black text numbers. No 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.

1
  • 8
    Great details, and I agree that the contrast of 3 in dark mode seems too low.
    – Jacob
    Nov 29, 2023 at 22:37
42

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 or . 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.

4
  • 3
    One thing I didn't like about the previous design was the use of the same color for bounties as tags. Personally I upvoted answers asking for option 4 with not bolding. The bold aspect seems to be what people dislike the most. 2 days ago
  • @CaveJohnson I honestly don't care about bounties, it is a strange feature that doesn't sit well in with the rest of the site design. Supposedly rep is a measurement for the community's trust in one single person. Except, it is apparently also a currency... "I trust you because you are rich". Hmm.
    – Lundin
    yesterday
  • 2
    "because the text now takes up so much of the total button size" - I don't see why this is an issue, though? You can click on the text itself and it still registers as clicking on the button. If anything, you should want the text to be larger because it forces the total button to be larger. yesterday
  • @KarlKnechtel Originally I was certain that the tag sizes had shrink, but then someone pointed out to me that is was more likely just an illusion caused by the bold text. Either way, tiny tags are problematic UI since you are supposed to be clicking on them. Not necessarily a problem related to this most recent change though.
    – Lundin
    yesterday
34

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.

2
  • 7
    I agree on all your points, additionally I dislike #3 because of the bold text that looks out of place with the rest of the design and draws too much attention to the tags imo.
    – Marijn
    Nov 29, 2023 at 16:03
  • 7
    I'm beginning to wonder if option 1 is just there to be spiked. Dec 1, 2023 at 17:02
32

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.

enter image description here

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 ;)

enter image description here

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.

4
  • 16
    GIF is helpful. Thanks. Dec 1, 2023 at 16:53
  • 5
    @Michael - welcome. I had the four pages in consecutive tabs, which gave me a far better comparison; so I thought I'd just gif one small area to save everybody else having to flick through tabs themselves, which might be fine on a computer, but nasty on a phone :)
    – Tetsujin
    Dec 1, 2023 at 16:54
  • 1
    I prefer Option 4 as well. I use dark mode wherever it's available. :)
    – DaveL17
    Dec 17, 2023 at 19:10
  • What if the text were only bold when "high contrast" is requested in settings (since the extra font weight is probably a big help in achieving that contrast)? yesterday
22

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.

5

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. , ) helps disambiguate (though on meta sites I think non-special-meta tags I think they're in greyscale).

2
  • Why is it an issue if tags look the same as keyboard markup, exactly? yesterday
  • @KarlKnechtel I just prefer if I can tell a clear difference between the different markup renderings. yesterday
4

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.

2

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.

-6

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .