182

A few months ago, we let you all know that in order to progress our goal of being more accessible, we would need to redefine our colors within our design system, Stacks.

Before I walk you through the changes that we are looking to make, I want to thank the community for all your input. We found the input valuable and it directly affected some of the decisions we made, like using APCA to measure our contrast.

Proposed Changes

When creating the new color palettes, we aimed to solve a number of problems. First, we wanted to be more accessible, but we wanted to do this without hindering usability. A lot of people questioned this in my previous post. The best example I can give is when we updated the post summary to use an “accessible” green from our existing palette, it became harder to scan for answered questions. There was simply not enough saturation in our existing palette at these darker values to create the contrast we needed in order for our users to be able to scan quickly. Thanks to the community’s suggestion, we believe we have been able to accomplish this by using APCA to guide our decisions. APCA generates a lightness contrast value that is perceptually uniform. This means that regardless of how light or dark the two colors are, something with a rating of Lc 60 will have the same perceived readability, which is not the case for WCAG 2.

Another problem we wanted to address was the inconsistencies across the site. Now I will admit right here that this will not fix all inconsistencies, but reducing the amount of colors in the palette will help create a more cohesive experience. This includes the removal of the “powder” color from our palette. Powder was added to our palette originally to be inclusive of the Stack Exchange beta theme. Since the creation of Stacks, theming was created and released and the inclusion of this color within the palette is no longer needed. Powder and blue will be replaced with one new blue palette. With Stack Exchange and the beta themes in mind, it is the only theme whose primary color we did alter in this exercise.

Lastly, there were technical issues we wanted to solve, like ensuring all colors of the same level could be used for the same purpose. This has been the cause of most of our dark-mode defects and the cause of a lot of unnecessary code. An example of this would be if black-700 could be used for text in light mode, but not dark mode. We would then need to go in and add an additional class to override the color in dark mode for an optimal contrast, but we believe this should just be inherent to the system itself.

New Color Palettes

I’m sharing the color mapping palette with you, so you can see the relationship between the existing colors and the new colors. Below, you’ll find a snippet of the palette with number annotations and what those areas represent on the palette.

Snippet of color mapping palette, with numbered labels

  1. The numbers 0 through 900 represent the current numbering system of our colors.
  2. The “Foreground” and “Background” labels are used to show the purpose of the colors, as in whether they should be used for the foreground or the background.
  3. These labels give even more purpose to the colors giving you an idea of how they will be used around the site(s).
  4. The top row represents the new palette; the bottom row represents the existing palette.
  5. An x means that a color does not exist at this stop. This was mostly used to map the current palette against itself.

Below, you’ll find our new palettes:

Full new color mapping palettes for light mode and dark mode

As you can see, there is a reduction in the number of colors. This is intended to reduce the number of color inconsistencies across the site caused by designers choosing different but similar colors. You will see the biggest reduction happens in the foreground colors. A reason the reduction isn’t as great in background colors is because we need to support backgrounds, borders, and borders on backgrounds. Additionally, our Teams product, who also uses these palettes, uses a gray background, unlike SO and SE who use white, therefore they need more grays.

We also heard you speak about color issues regarding badges/awards and have added an additional stop to give designers and developers more options when working with these elements.

Key takeaways:

  • Both of these palettes pass APCA standard

  • High contrast palettes pass WCAG 2.1 AAA standard

  • Number of colors has reduced across the board except in the award palette where we have added additional background colors.

Next you’ll see where we mapped the general usage guidelines for the new palette and how they map to type and background hierarchy. This format also gives guidance to the designers on what color combinations they can use to ensure accessible, consistent use.

General usage guidelines for new color palette

Component changes – buttons

There aren’t many components that will be changing outside of the colors that they inherit, but buttons are one of them. Dark mode buttons are actually using a third blue (not pictured in the palettes above). With our new buttons, they’ll be using the same blue that the links are using. We’ve also taken this opportunity to remove the shadows in our recent effort to reduce visual clutter. Rounded corners are typically seen as being more friendly and safe, so we have also taken the opportunity to increase the border radius on our buttons from 3px to 6px.

Buttons in various colors/designs in light mode and dark mode

Examples

Below, you’ll find examples of what the pages will look like with the new colors in light mode and dark mode, if applicable. (Since there are a lot of examples, we've resized the images below. Click on an image to view it at full size.)

Meta Stack Exchange

Meta Stack Exchange will be keeping the theme intact, so changes are small.

Questions page on MSE, with updates

Stack Exchange beta sites – user profile

The beta theme is the only “theme” changing. It will be replaced by the new default blue.

User profile page on beta site, with updates

Stack Overflow – Questions list

Questions page on SO in light mode, with updates Questions page on SO in dark mode, with updates

SO – Ask Question Wizard

Ask Wizard page on SO in light mode, with updates Ask Wizard page on SO in dark mode, with updates

SO – Staging Ground

Staging Ground listing on SO in light mode, with updates Staging Ground listing on SO in dark mode, with updates

SO – Moderator History

Mod history page on SO in light mode, with updates Mod history page on SO in dark mode, with updates

SO – Collectives – Actions for you

A collective's "Actions for you" page on SO in light mode, with updates A collective's "Actions for you" page on SO in dark mode, with updates

You’ll also find high-contrast light and dark mode mocked up below.

A collective's "Actions for you" page on SO in high-contrast light mode, with updates A collective's "Actions for you" page on SO in high-contrast dark mode, with updates

What isn’t changing

In order to ensure alignment, I want to call out a number of things that are out of scope for this project:

  • We will not be updating any individual site themes
  • We will not be changing the colors of certain UI elements that may seem inconsistent. This is because of scope, not because “we believe the notification indicator should be red while others are blue”.
  • We will not be updating pages that do not currently use the Stacks design system (e.g., the Stack Exchange landing page and chat pages)
  • No logos are changing

Next steps

We really appreciate you taking the time to see what we are working on. We are interested in hearing your thoughts especially around the changes in dark mode. APCA restricts the use of saturation in dark mode—how do you feel about the muted palette?

Please share your feedback in an answer below.

Although the colors have been defined, when you put colors to use, things can change—and the next time we share, things may look different. For now, we will work your feedback into the palette. Then we will start moving these colors into the design system which will take us into at least August. After that, we will work to align legacy colors against the new colors to ensure a smooth experience on the site. We aren’t sure how long this will take, but we’ll update you as we know.


Update (July 6): Changes made

Thank you to everyone for your feedback. The Stacks team is starting work soon, so I wanted to follow up with the changes that we have made based on your feedback.

We have put in a PR to fix the link visited state. This solution will simply be a darker blue. We may have a different approach when the new colors are implemented, so please share your feedback when the fix goes out.

Here is a list of changes made to the color palette:

  • Desaturated light-mode middle blue
  • Desaturated light-mode greens
  • Altered the hue of the green to make it slightly more blue
  • Darkened and desaturated yellows in dark-mode
  • Aligned saturation and brightness of background and border dark-mode colors

I want to give a quick note on that last point. We worked to align these, but ultimately what we prioritized was the contrast number coming back from our APCA calculator. So if we gave green a saturation of 40 and brightness of 50, but the APCA contrast was 35 when blues was 25 with the same saturation and brightness, we needed to reduce the saturation/brightness of green to align with the rest of the colors in that same level.

You can view the updated palettes and updated Stack Overflow mock-ups below.

Updated palettes

New accessible color mapping palettes for light mode, updated with meta feedback New accessible color mapping palettes for dark mode, updated with meta feedback

Updated Stack Overflow mock-ups

Stack Overflow's Questions list page in light mode, with updates Stack Overflow's Questions list page in dark mode, with updates


Update (July 24)

To circle back on some of these items, we wanted to let you know that the following items have been successfully updated:

  • New buttons
  • Border radius
  • Visited anchor colors

You can see the complete list of updates in the Stacks release notes.

24
  • 98
    Can y'all make visited links actually contrast from unvisited links while you're at it?
    – Zoe
    Commented Jun 28, 2023 at 15:47
  • 8
    This looks like an improvement in terms of maintainability and accessibility overall, thank you. My only gripe at the moment is how dark the accepted answer color is for the post score widget to the left of a question title. I'd prefer it be a lighter shade of green; the 2016 "new greens" were quite nice (with the accepted color being the 5th from the left in the "new greens" scale).
    – TylerH
    Commented Jun 28, 2023 at 15:55
  • 3
    Speaking of useful feedback: I quite like the extra contrast in dark mode (which is what I use). I don't need it, but it makes the site more functional, easier to use, while still looking good. As a user with normal eye-sight, high-contrast mode decreases my efficiency. You might want to consider more contrast in the default light mode. Commented Jun 28, 2023 at 16:20
  • 7
    Can we have a TLDR please? Also, when will sites other than SO get dark mode? Commented Jun 28, 2023 at 16:21
  • 46
    @RandomPerson-onstrike The tl;dr is that colors are changing and here's what they look like.
    – TylerH
    Commented Jun 28, 2023 at 16:24
  • 15
    Would you also address the issue with the new upvote/downvote buttons not being clear in the dark mode? I have a really hard time to know whether I voted on something or not. meta.stackexchange.com/questions/389359/…
    – M--
    Commented Jun 28, 2023 at 16:52
  • 12
    Thank you for explaining what was left out due to limiting the scope. I know some people will gloss right over that and ask questions about that stuff anyhow, but it kept me from asking about certain things :)
    – ColleenV
    Commented Jun 28, 2023 at 17:03
  • 4
    @zcoop98 Sorry our miss, that is just a mock-up thing — we're not removing the icons as part of this initiative.
    – Carrott Staff
    Commented Jun 28, 2023 at 17:12
  • 2
    Not liking the completely flat buttons; not that current ones are great, but they are at least recognisable as buttons. The rest of the changes are okay, I guess. Commented Jun 28, 2023 at 17:26
  • 43
    @Zoeisonstrike I will look into the visited link contrast immediately.
    – Piper Staff
    Commented Jun 28, 2023 at 18:04
  • 20
    (I do want to jump in here and ask that if folks have more substantial questions or concerns that might need followup, please post them as an answer rather than a comment – it's harder to follow the conversation and respond to feedback in comments than in answers. Thanks!)
    – V2Blast
    Commented Jun 28, 2023 at 19:00
  • 6
    Most previous design changes look like one-off random tweaks that lacked a holistic vision. It's nice to see an actual vision for the design. Commented Jun 30, 2023 at 17:19
  • 5
    I just unprotected this question so that feedback can actually be posted freely as answers here - it was protected by the Community bot, so I assume that was an automatic process rather than a staff decision that I've just countermanded. (cc @V2Blast) Commented Jul 2, 2023 at 9:59
  • 2
    Looking to see what happened @zcoop98.
    – Piper Staff
    Commented Jul 24, 2023 at 21:44
  • 2
    Should be fixed on Stack Overflow now @zcoop98. Long story short, themeing is hard and a more holistic fix will have to come later.
    – Piper Staff
    Commented Jul 25, 2023 at 19:06

11 Answers 11

94

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:

    Monitor #1, with distinguishable background color.  Monitor #2, with indistinguishable background color.

    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:

Screenshot of "Highlighted stats" section of current SO mod dashboard.

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:

Screenshot of post, with two different links, one visited and one unvisited—which is which? As a visually-impaired user, you're in no worse position than anyone else to answer this question!

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.

Screenshot of same post, with same two links, but now with the visited link clearly distinguished from the unvisited one by being in a purple color. I accomplish this with a userscript.

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

Same screenshot, just with different custom color for visited links, as described above.

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

2
  • 26
    There are a lot of great things here. Some of these were unintentional (orange pagination on MSE), some outside of scope (theme-ing short comings), and others that will be looked into. We appreciate you taking the time to give such detailed feedback.
    – Piper Staff
    Commented Jun 29, 2023 at 12:56
  • 6
    I definitely agree that some colors are just too bright. Especially green on answers and reputation background. I can hardly read the text and darker green would be much better. Also image resolution is a bit fuzzy so it is hard to properly evaluate. I can only comment on light theme as my eyes cannot read any dark theme. Commented Jun 29, 2023 at 13:04
17

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

5
  • 24
    The Stack Overflow trademark guidance says not to copy the “look and feel”, and every footer says “Site design / logo © 2023 Stack Exchange Inc;”. But many aspects of the site's design are not copyrightable (e.g. the old triangular voting arrows) and basically none of this is registered-trademarked (but that may not matter). Rule of thumb: if somebody with an eye for detail would mistake your site for Stack Exchange, don't do it.
    – wizzwizz4
    Commented Jun 28, 2023 at 22:16
  • 2
    @wizzwizz4 I mean, the new look kinda feels like Bootstrap, so, does the advice even hold water in that situation? Commented Jun 28, 2023 at 23:42
  • 12
    @IsmaelMiguel I really don't understand this area of law, but trademarks normally only apply to unique, recognisable things. Stack Exchange can't claim any kind of monopoly on contemporary design trends.
    – wizzwizz4
    Commented Jun 29, 2023 at 11:34
  • 3
    No, a color palette in and of itself can not be owned.
    – Cerbrus
    Commented Jul 3, 2023 at 7:21
  • Almost certainly not, but they could try.
    – JDB
    Commented Jul 6, 2023 at 20:17
16

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:

jump

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

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

variations

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:

exercise


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

3
  • 11
    In my perception, your "more balanced" result looks extremely faded. It feels like that extra contrast on the dark background is just necessary.
    – Cerbrus
    Commented Jul 3, 2023 at 7:17
  • 7
    Well, it's supposed to be faded, just like it is faded in the light mode. This is an excellent analysis, I completely agree with it, and it would be something that definitely would bother me if I used dark mode. Commented Jul 4, 2023 at 5:28
  • Even though I agree with Cody, this depends heavily on environmental light, your iris' tension, monitor brightness, monitor contrast, monitor backlight, monitor gamma, environmental light in your room, and your personal perception of colors and fades.
    – Hacky
    Commented Jul 25, 2023 at 12:44
10

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?

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.

8
  • 6
    In the screenshot, the blue is meant to be a regular link color and the red is for a destructive action (rare use case).
    – Piper Staff
    Commented Jun 29, 2023 at 0:31
  • 3
    Let me dig into the first post, "Dark mode contrast...", some more before I reply to make sure I understand it correctly.
    – Piper Staff
    Commented Jun 29, 2023 at 0:31
  • 7
    I have put in a fix for the visited contrast of regular links (in all modes) that will fix some (most?) of the issues in your second post, but it will not fix them all. That fix is a PR right now that has been approved by the design system and will need to go through the product teams next so it may be a bit before it's live.
    – Piper Staff
    Commented Jun 29, 2023 at 0:39
  • 4
    No. Not desirable. But while I'm here hanging out in Meta—I'm curious what you all think of that card being yellow. Do you like that it stands out? Would you prefer it blend in more? Do you have a preference at all?
    – Piper Staff
    Commented Jun 29, 2023 at 0:42
  • @Piper I edited my stance into this answer post.
    – starball
    Commented Jun 29, 2023 at 0:46
  • 6
    Given how many active users apparently miss the "Featured on Meta" stuff entirely, I'm OK with it standing out and drawing your attention. It's easy enough to ignore if you've already looked at it and determined there's nothing [more] there that you care about. I also definitely like it being yellow for that "yellow sticky note" theme. It doesn't work as well, metaphorically, in dark mode as it does in light mode, though, so it might be reasonable to try a different color scheme in dark mode. Not red or green; those have semantic meanings that any design should attempt to preserve. Commented Jun 29, 2023 at 6:24
  • @Piper I agree that the dark mode side bar is too grabby. Perhaps both background colors should be bumped down a notch? Commented Jun 29, 2023 at 17:03
  • @Piper any updates on the link colourings? It's a pretty easy thing to fix and is extremely confusion-and-discomfort-inducing when I'm on a computer where I haven't userscripted a fix. I personally find the fact that I have to userscript a fix for something so simple kind of mind-boggling.
    – starball
    Commented Aug 9, 2023 at 20:37
8

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.

2
  • 2
    Related: We are graduating the updated button styling for vote arrows – and Sasha's answer there.
    – V2Blast
    Commented Jun 29, 2023 at 15:31
  • 4
    @V2Blast - thanks for pointing me to that answer. Though apparently a month is not sufficient to fix the problem, and SE seems to be relying on users to report what is immediately visually obvious to all, and "we are keeping track of this" "we are fixing this" it is still a response from SE and we can hope a fix will be rolled out.
    – davidbak
    Commented Jun 29, 2023 at 18:01
8

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.

Old and new color comparison

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.

3
  • 3
    The text should really just be black. For a q with an accepted answer, they could do a two tone thing (like GitHub badges) where the check mark side is whatever green they want and the text is white on black.
    – Laurel
    Commented Jul 2, 2023 at 13:23
  • 1
    I think the two-tone thing would be even more distracting. I like what they have now, with the darker shade of green. This is one of the things I was talking about in my answer, with the proposed new green being too "bright". It needs to be bumped down at least one notch, maybe two. Commented Jul 4, 2023 at 5:30
  • @Laurel FWIW I can't read GitHub badges either. Actually, they are worse. Commented Jul 4, 2023 at 6:34
6

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?

4
  • 6
    My guess: because WCAG is involved in meeting some actual industry standard requirement, whereas APCA is more practically informative (per previous discussions about visual contrast). Commented Jun 29, 2023 at 6:34
  • 10
    @KarlKnechtel is correct. We need to hit it in at least one theme for our Teams product
    – Piper Staff
    Commented Jun 29, 2023 at 12:36
  • 4
    @Piper did I understand it correctly that the high contrast palettes pass both standards? If so, bravo to the team; it's good to see that kind of user feedback taken seriously. (And I have to say I was quite impressed by that one user's expertise on the subject in the prior Meta discussion!) Commented Jun 30, 2023 at 9:08
  • 5
    @KarlKnechtel That is correct! And I agree about the user's expertise. It guided a lot of our direction and I was incredibly grateful. Because of that user, we feel that we are now in a good place for WCAG 3 (in regards to color contrast) which is a big win.
    – Piper Staff
    Commented Jun 30, 2023 at 12:54
5

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?

1
  • 11
    You may notice the color changes more when you are in it, but honestly, it should feel minor. I personally think the biggest impact is going to be the usability of our dark mode. You should also see less dark mode bugs. Going forward, the biggest change for accessibility is the fact that we will now prioritize APCA over WCAG standards and we will keep those guidelines in mind for new site designs.
    – Piper Staff
    Commented Jun 29, 2023 at 0:45
4

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.

1
  • 4
    This is also mentioned in starball's answer – and Piper has asked for feedback on that aspect in particular in a comment there – so you may want to share your thoughts on that in the comments there as well.
    – V2Blast
    Commented Jun 29, 2023 at 15:41
4

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.

3

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.

3
  • Possibly some legal body mandates the availability of a mode that satisfies WCAG 2.1 contrast guidelines? As long as the design also meets APCA, that shouldn't be (much of?) a problem.
    – SamB
    Commented Jul 14, 2023 at 1:12
  • Indeed, WCAG 2.x contrast specs are not a useful model of human contrast perception. @SamB as APCA is designed for actual accessibility, generally exceeding WCAG 2. Independent studies using thousands of random color pairs found that 47% of the color pairs WCAG 2.x passed were insufficient for good readability. Paradoxically, 22% of the color pairs WCAG 2.x rejected were actually better for readability. I.e. wrong both ways & "colorblind" are negatively impacted. To fix this, APCA can't be backwards compatible. See smashingmagazine.com/2022/09/realities-myths-contrast-color
    – Myndex
    Commented Jul 18, 2023 at 18:48
  • Many of the studies cited by WCAG 2.1 in the rationale for the contrast recommendations were not designed to measure ease of reading. Some attempted to measure the smallest perceptible difference. Some were extremely old and used non-representative cohorts of test subjects. None used the display technologies we have today. The ratios themselves were largely guided by earlier ANSI and military standards for monochrome CRT displays. Commented Jul 18, 2023 at 21:07

You must log in to answer this question.

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