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