Colors update: A more detailed look

First, I want to say that it looks like a lot of thought and planning went into this, so thank you for that. Also, thank you for sharing such a detailed post, including both rationale and details so that we can preview/review this before it goes live. (And, hopefully, soon enough that our feedback can be taken into account before the work is completely finalized.)

There are a lot of things to like here, in terms of the small things that have actually changed, so I won't go through them all. A highlight is the "Community Bulletin" (yellow thing in the sidebar), which looks much improved over the current design, with contrast used to great effect to clearly differentiate the headings and make the links in the content sections more easily readable.

One of the things I like most that I really want to call out is how much the overall design and aesthetics were respected, while also trying to improve things like contrast and consistency. Stack Overflow/Exchange is a mature product now, with a mature, recognizable brand. Maintaining as much of that identity as possible is good for everyone: the users and the company. Of course, progress on things like accessibility, look-and-feel, and so on shouldn't atrophy, so a delicate balance needs to be struck. It not only feels like the correct amount of effort was put in here to attempt to strike this balance, but it actually feels like you have successfully struck this balance. Awesome work; thank you so much!

Screenshots with a limited resolution are not the ideal way to get a feel for how everything will look when it's all said and done. But they're what we have, so I'm going to try. Here are a couple of my thoughts (focused primarily on light mode, because that's what I use):

Meta Stack Exchange theme

• Certain UI elements look just a little bit too bright. Specifically, the green color used for answers and accepted answers feels too bright. It is especially noticeable when the question has an accepted answer and the green is used as the background color for the badge—it just stands out a bit too much, and it doesn't seem to have enough contrast with the white foreground (text) color. I think choosing a slightly darker shade of green for this would also help make the border for the "answers but none accepted" indicator more visible against the white background of the page.

• The "Add an ignored tag" button color seems too light/bright and not particularly affordable as a button. I'd consider darkening that by at least one click.

  This button also has a weird feel next to tags, as they are both styled using very similar colors, with the tag color being slightly more blue while the button color is slightly more green. This contrast feels very disharmonious. I guess this is more a problem with the MSE theme, which is a teal color, while the tags are blue. Seems like to me that the tag color on MSE should be adjusted to include a bit more green so it is more consistent with the site theme. Although maybe this is something you meant to explicitly put out of scope when you said: "We will not be changing the colors of certain UI elements that may seem inconsistent" (even though it is different from the example you gave).

• The navigation pagination at the bottom is orange (!) here, when it really should be the teal color from the MSE theme. Maybe this is just an accident/bug, since the orange would be the correct color for the Stack Overflow theme—and would look nice there!

• The yellow background used for "interesting" questions (those with watched tags) looks fine on one of my monitors, but it is (literally) indistinguishable from the background color on two of my other monitors. Since this obviously cannot be demonstrated with a screenshot, here are actual photos from my monitors, hastily taken with a smartphone camera:

   

  While I understand you could dismiss this concern with the argument that my monitors are poorly adjusted, I think doing so would be a mistake: a site like Stack Overflow is used by people all over the world, with all kinds of hardware (old and new), under all kinds of conditions (e.g., laptops outside and/or in bright airport terminals). I think you need to optimize for usability at the lowest common denominator, and that means ensuring sufficient contrast under all conditions. Speaking of contrast, my monitors are generally tweaked to favor contrast, because I spend all day looking at code and other text. This means that minor variations in color are not super visible. I suspect this is the explanation for my inability to distinguish these colors. I also suspect I am not alone in having such a configuration.

Beta site theme

• The blue color used for links looks too bright, as does the green color used as the badge background color for answered questions. I think the overall design would look less stark/shocking, and the contrast would be improved, if these two colors were turned down one notch. Again, I realize this is a subjective opinion, and I'm no designer. I don't even have a good way to test the effect of this using only the screenshots. But I feel strongly, looking at them, that these two colors, as used on these elements, are too bright/bold, thus creating inappropriate emphasis and insufficient contrast.

Stack Overflow theme

• As with the Meta Stack Exchange theme, the green color used for answers/accepted answers seems one notch too bright to me.

• Unlike the Meta Stack Exchange theme, the "Add an ignored tag" button looks a lot better here... more contrast, I guess? And no disharmony in the hue.

• As with the Meta Stack Exchange theme, the background color for "interesting" questions is insufficiently visible.

• There is insufficient contrast on the navigation buttons at the top of the screen. I get that you probably want to de-emphasize these, as they're not primary content, but I don't think quite the right balance was struck here when usability is considered. The low-contrast borders are fine, since you've got adequate whitespace (breathing room) around them. But the background color for the "selected"/"active" pill is not dark enough by my standards. My concerns here are similar to those raised in the previous bullet, about the background color for the "interesting" questions being insufficiently distinguishable from the normal background color. I'd really encourage you to make the "selected"/"active" pill background color one click darker.

Stack Overflow Moderator History

The light mode has a pretty major regression here, which I didn't originally notice: the "warning" text color has gone missing!

Note in the new dark mode version, the text at the top saying "50% or less" is colored in yellow:

The current light mode theme has equivalent styling:

But the new light mode just shows this text in bold, using the same (black) color as "normal" body text:

This is losing information. Obviously, I get why you might not want to use yellow text on a white background :-), but this "warning" semantic signal needs to be retained (especially in other places in the mod tools). Maybe use orange text and red text in light mode?

Buttons

Overall, I have to agree that the "updated" variants look better. I think saying that rounded corners are "more friendly and safe" is nonsensical; it's purely a design choice, but the design choice looks fine.

However, I have a major concern about a lack of contrast for the "secondary" button. Specifically, the outlined version has far too light of a border. Note how much contrast you have with the outline for the primary (blue) and danger (red) buttons—this is good. Now, compare that to the outline on the secondary (gray) button—why is it so weak?! Give it strength! :-)

I also mildly dislike how you have buttons without any outlines or visual cues/affordances whatsoever (the furthest-right button style of each category), but that's not new here, so I guess I will put my complaints about it out of scope.

Links

Independent of those, I really have to echo Zoe's sentiments about a lack of distinction between unvisited and visited links. Here's the current state of affairs:

Can you tell which one of those I've visited? Me neither.

This has been a problem for many years on Stack Overflow, and I've long had to work around it by injecting custom CSS. It's irritating enough as a casual user of the site not to be able to distinguish between visited and unvisited links, but, as a moderator, it makes the site unusable. Unvisited links are blue; this is nice, it fits into the site theme, and it matches the standard web convention. The standard web convention is to make visited links purple. I'd love if you would do that.

But I'd settle for at least making visited links a desaturated blue; e.g. a 50% saturation as opposed to 100%:

I acknowledge you did already make a commitment to look into this. Thanks for doing that. Please, please fix it!

Incidentally… it would be really cool if you could figure out a way to share these changes with us in a simulated environment before they go live. Perhaps a mockup on a subdomain or an alternative page, or perhaps just the revised stylesheets (CSS) that we can apply ourselves. (While CSS is "source code", it is always sent in full to the client, so there's no risk of divulging any proprietary information or trade secrets by making this available to us.) This hearkens back to a discussion that was had earlier about userscripts, specifically creating an API for them, a list of dependencies for them, and the attempt to create a changelog for things that affect them. Quickly summarizing, a lot of moderators and highly-engaged users make extensive use of userscripts to customize the appearance and/or streamline the operation of the sites in their own browsers. Some of these are tweaks for accessibility reasons; others are functional enhancements to make moderating a giant site like Stack Overflow remotely feasible. I'm far from the most prolific author of userscripts, but I have a couple that I maintain, including one that is very widely used by moderators that displays moderator flags "inline", directly above or below posts, instead of down in the "waffle bar". I expend a significant amount of effort to making these supplemental tools and UI elements "fit in" as much as possible with the normal site; thus, I make extensive use of the Stacks color palette and other style conventions. I realize that I and other userscript authors will need to update these to comply with your changes, and that's fine. I only ask that, if at all possible, some way be provided for me to start doing that and start testing it before the updates go live everywhere, thus potentially breaking the tools that I and many other users depend upon (and creating a major, urgent need for me to expedite a fix, which leads to sloppiness, mistakes, stress, etc.).

Are these color palettes covered by copyright or trademarks? Is it OK to use them on other sites?

We all know that color is not the same as mathematics but rather is related to perception. But in such large projects, there should be a balanced relationship between data and perception.

I personally see a big jump between colors in a light and dark mode:

In perception, the analysis is the relationships between:

• Background/Individual object
• Background/Group of objects
• Individual object/Individual object
• Group of objects/Group of objects

Perceptually, the colors on a light theme conform to a somewhat dusty pale-pastel pattern, while on a dark theme, the different saturations make cohesion difficult showing a metallic look very different than the light soft subtle appearance.

Analyzing a screen capture, I find the light colors adjust to one hue each and then maintain approximately the same saturation (≈ 4.5%) and brightness (≈ 99%), while in the colors on a dark mode, the hues are different than in light mode, the saturation varies between 55/80% and the brightness between 24/35%:

After looking for a base pattern and trying to give the color on a dark background a perceptual reading similar to that of the relationship on a light background, performing the same exercise as with light colors of respecting the row's hues and the column brightness and saturation, the result is perceptually more balanced:

By the way, I think the color palette shown in the question only refers to the desktop application, on mobile phones it would not work

What do the two text link colours for each thing in this screenshot mean? Is one for visited and one for unvisited links?

Will either of these SO things be improved by these changes?

• Dark mode contrast: regular text has much higher contrast than `--theme-post-title-color`
• Please swap (or change) the styling colors of visited and non-visited links in dark mode

Also, just a stray observation: the right sidebar is now very prominent and eye-drawing for me in the SO dark mode screenshot- like- first-thing-that-draws-the-eye-prominent. Not sure if that's desirable, or if it's just me that feels that way. I don't have much of a preference on what colour it is as long as there's some logic behind it (I wouldn't understand if it was red, for example. I could understand blue or orange (on SO). Green would be passable but weird in my opinion. I'm used to the yellow, but I'm not emotionally attached to it in any way. It always felt like yellow notepad paper to me in my mind). But I do like that currently it isn't very attention-drawing: The main thing of focus on a Q&A site should be the Q&A content.

I'd like to see first the background color of the new circular up/down vote arrows fixed. It's so subtle you can't even tell if it is there. ("Light" mode.) I bet if you tracked the number of times the "you've already voted on this" message popped up (I think that's it) you'd see a jump up around the time you implemented that.

feature-request

The green color used for reputation has been unreadable for me for a long time. New green color you have introduced in your palette is just as unreadable as the old one.

The color I can read would be darker shade of green and the darker one you have in the palette would be appropriate. Currently you have such darker color on the answers list. Please use the darker green color in all places where green and white combination involves the text.

In following image you can compare current green color on the left and new proposed one is on the right.

Additionally, the new design is a bit slimmer and there is less space around text comparing to the old design which also makes text harder to read.

Key takeaways:

• Both of these palettes pass APCA standard

• High contrast palettes pass WCAG 2.1 AAA standard

Was there a reason to move to APCA standards for regular contrast but follow WCAG standards for high contrast?

Just to clarify - this feels like it means minor tweaks on meta.se teams, beta designs and SO from what I can tell... Which seems quite minor. Where else would these accessibility changes matter? Would they be taken into account on new site designs and potential revamps?

More importantly - we can see what's the broad plans but what's the impact we will see (no pun intended) practically?

Overall, it seems like you've put a lot of thought and good work into this, and I like the design in general. However, I'm concerned that in dark mode, the blog/featured panel at the top right really dominates the page impression because of the new, brighter shade of yellow.

feature-requestbug

While I am not sure if this is entirely on topic for this question, I decided to share a screenshot of I what mean by my comment, when I say it's not clear whether I have interacted with the new upvote/downvote buttons in the dark mode. After some light testing, this seems to be an issue only on Meta Stack Overflow and possibly other meta sites.

As you can see, after voting it goes from a dark grey outline and a light grey arrow to a black outline and a white arrow.

Obviously, I am using a userstyle to get the dark mode, but because of the grey shades that are used with many meta sites and the new vote buttons, this issue came to existence. A simple change to the colors should resolve this.

Maybe it's just me, but the informational background colours (blue/green/red/yellow) in the light theme seem way too low contrast, and I need to stare at them for a moment before I realize what they represent; when I see a message box with a ac-red-025 background, it doesn't immediately register as an error. These colours exist to communicate information at a glance, and needing to focus to make them out prevents that.

These pastels also break on some monitors. If I turn the contrast on my monitor to the (admittedly excessive) max, the blue becomes red, and the green becomes yellow. Increasing the colours' contrast would resolve this alongside the yellow colour issues mentioned in https://meta.stackexchange.com/a/390792.

By contrast, the dark colours feel perfect. I suppose I'm asking for the opposite of https://meta.stackexchange.com/a/390862; copy the contrast from dark to light mode.

I didn't know about APCA before reading this post, but if it's intended to address the well known shortcomings of WCAG 2.1 contrast, it's a step in the right direction and I applaud that.

WCAG 2.1 contrast guidelines are so broken, I don't care that, "High contrast palettes pass WCAG 2.1 AAA standard."

Of course, that statement is meaningless as WCAG contrast guidelines aren't about palettes, but text as rendered. The normative test procedure examines the colors of the background and text pixels at/near the edges the rendered glyphs.

Unfortunately, the checking tools consider only the specified colors and type size, often resulting in overinflated contrast calculations. Thus, even if the AA and AAA thresholds were useful, the checking tools would continue to give a false sense of compliance, as does the claim that a palette meets the contrast guidelines.

I'd be thrilled if site simply ignored WCAG 2.1's minimum contrast guidelines altogether. Focus on APCA or whatever ends up in WCAG 3.