94

As you may already know, we were working on accessibility last year. We took a break about a few months ago to assess how we were approaching the problem and rethink that approach. We never want to sacrifice usability for accessibility. Both are very important at Stack Overflow. With that in mind, we decided to more methodically and systematically approach accessibility so that we are ensuring that no one’s experience suffers. Our goal here is to be more inclusive, not less.

Next Step: Colors

Instead of going in and fixing colors one at a time, the Stack Overflow designers plan to redefine the colors within our design system, Stacks. This redefinition should allow us to do the following:

  • Create brighter, accessible friendly colors instead of all colors simply being dark and mundane
  • Ensure colors that pass contrast in light mode also pass in dark mode
  • Create wider coverage more quickly instead of designers and developers fixing contrast issues one element at a time

We’ve gone through the site and tried to identify colors that are currently used to convey some sort of meaning. We’ve identified the following colors: Orange, Blue/Powder, Red, Green. Orange is used to represent our brand. Blue is used to represent links, buttons, and status. Red is used to represent errors. Finally, green is used to represent answers, status, and success. Do you agree with these colors? We will design our new color system around these and share what we come up with alongside comps (mockups) of what those new colors may look like across Stack Overflow, Stack Exchange, and Teams.

Beyond

While the design team steps away to focus on colors, our Community Managers are working to go through the backlog of accessibility requests from Meta Stack Overflow and Meta Stack Exchange. This will help us determine next steps regarding accessibility. We appreciate your patience and input during this process. It is incredibly important to our designers to create equal access to knowledge and enable learners from all levels and backgrounds and we will continue to keep you updated as we progress through our work.

19
  • 49
    A mock up might be nice - also with more bespoke site designs how will these work? Jan 26, 2023 at 16:39
  • 9
    What does it mean to represent "status"? Like blue for mod status on the profile page? Blue for OP status? Blue for bounty status? Green for what status?
    – Laurel
    Jan 26, 2023 at 16:44
  • 5
    Regarding the final section, can other per-site metas also be checked for accessibility or colors reports? For example, I filed a report on Puzzling Meta for a color issue that only affects that site - this site has a policy of closing questions only to do with one site with users referred to the relevant per-site meta. Jan 26, 2023 at 16:47
  • 40
    You move from project to project, without ever finishing past projects. Saves and the new inbox are full with bugs and feedback, and getting zero attention these days. So why you jump forward? Please focus on a feature, fix its bugs, listen to feedback, then move forward. That's how I expect site like SE to work. Jan 26, 2023 at 16:54
  • 68
    @ShadowWizardChasingStars: There's more than one team at the company, and more than one thing we work on at once; expecting the company to only ever work on one thing at a time until it's "finished" (however you define that for a website) seems unreasonable. The bug reports and feature requests from the inbox improvements release post are being actively worked on (which I can personally comment on because I'm the CM liaison for that project); we'll post updates there as that work gets done.
    – V2Blast
    Jan 26, 2023 at 17:13
  • 13
    Welcome to Meta! I hope your time here is productive and sane. I'm probably an outlier, but I am a mite concerned about "bright" colors in dark mode. I'm pleased that dark mode is already a consideration. Best of luck! Jan 26, 2023 at 17:13
  • 6
    @JourneymanGeek Definitely! Once we get some colors we feel are appropriate, we will share mock ups (called "comps" in my original post). We can definitely include a few bespoke designs as well. Great idea! Though this will be to show the network site colors changing around their custom colors/imagery. There will be no changes to custom site colors at this time
    – Piper Staff
    Jan 26, 2023 at 17:28
  • 6
    I'm not sure if it's the right time to feature this post. Maybe it could be featured after you add the details of the new color system in the post. Jan 26, 2023 at 17:35
  • 5
    Don't forget some people are colorblind and color alone is insufficient for A11y: w3.org/WAI/people-use-web/user-stories/#shopper
    – ColemanTO
    Jan 26, 2023 at 18:41
  • 21
    I think red is a bit more than just errors currently: it's also the color of at least one notification dot, the background color of deleted posts/comments, and the color of moderator-only tags (like featured or status-review) and the color of the flag icon after you've flagged a comment... In other words, it doesn't really seem to have a meaning at all, currently. Or is this about what these colors are going to mean in the future?
    – Tinkeringbell Mod
    Jan 26, 2023 at 18:58
  • 14
    @Tinkeringbell No, these call outs are just the things we are looking for. Thank you for sharing.
    – Piper Staff
    Jan 26, 2023 at 19:55
  • 19
    Related: My brain cannot ignore the ignored questions due to contrast change. Please change it back and Laurel's answer post there.
    – starball
    Jan 27, 2023 at 0:12
  • 8
    Thank you. Some of the previous changes made it seem like SE's accessibility strategy was to make the interface equally difficult for everyone to use. ;)
    – PM 2Ring
    Jan 27, 2023 at 6:51
  • 17
    One of my biggest pain points with colors is the poor contrast between an unvisited and a visited link, especially here on MSE. The two shades of blue take a lot of time to visually distinguish. See Visited links should be more visible and Add setting to change default link colors. Jan 28, 2023 at 8:03
  • 4
    @SebastianSimon: I distinguish them fairly well in the HNQ, I just never know which is which at a glance and need to read a question and remember if I saw it to "calibrate" my brain every time. Also, I sometimes have the impression they're inconsistent from one site to the next, requiring re-calibration :( Jan 30, 2023 at 15:21

12 Answers 12

117
+200

My current research focus is readability and accessibility of web content. As an invited expert of the W3C/AGWG (World Wide Web Consortium Accessibility Guidelines Working Group) I've been involved in co-authoring the future WCAG 3 (W3C Accessibility Guidelines 3), namely contrast/color related specifications. I'm a Color Scientist at Myndex Research and the creator of APCA (Accessible Perceptual Contrast Algorithm) Methods and Guidelines.

That said, I'll chime in with a few thoughts. Opinions expressed are my own and do not necessarily reflect those of the W3C or AGWG.

We never want to sacrifice usability for accessibility

Well good! Because usability is accessibility. Or vice versa.

The whole point of accessibility is to make content easy to read, understand, and interact with. For everyone.

If you ever feel that you're sacrificing usability for accessibility, then something is very wrong.

  • Create brighter, accessible friendly colors instead of all colors simply being dark and mundane

Yipe! "Brighter" does not necessarily mean accessibility friendly. For instance, a layout that is filled with lots of bright saturated colors all over the place can be cognitively overstimulating for some.

And a bright white background behind text in light mode is fatiguing.

As for "accessible colors", that can have more than one meaning—see the "Deeper Dive" below.

  • Ensure colors that pass contrast in light mode also pass in dark mode
  1. Use adjusted colors, don't try to shoehorn a color into working for both modes as you'll find it very frustrating and end up with non-accessible results, not to mention:

  2. WCAG 2.x contrast math does not work for dark mode, use APCA instead for dark mode (or all modes).

    • If you have a rare legal requirement, like Ontario, that requires strict 1.4.3 compliance, then use WCAG 2 or BridgePCA for light mode, and APCA for dark mode, as WCAG 2 only requires one mode.
  3. It is usually best to maintain the same or similar hue for interactive controls between modes for cognitive reasons.

    • The inverted or negative look can be very confusing.
    • but a deep red for light mode needs to be a light red or pink to be used with dark mode.
    • pure red or pure blue needs to be the darkest color in a pair of colors.

And now a deeper dive:

Readability and Accommodating CVD User Needs

User needs follows two broad categories

  • READABILITY requires good acuity and contrast sensitivity
  • DISCERNIBILITY requires color discrimination and recognition

Reading
With or without color vision deficiency (CVD) all visual readers require ample luminance contrast for fluent readability. Those with CVD do not need any extra or different consideration when it comes to luminance contrast, the singular exception would be red against black for those with protan, as they see red darker they lose luminance contrast for the specific case of red against black or red against a dark color.

All vision types need very good luminance contrast because the high spatial frequency of text, especially body text, has a much lower threshold of contrast sensitivity. Color contrasts, as in hue or chroma, do not play into readability, except if they interfere with luminance contrast or cause chromatic aberration.

As such, the content author need only to make sure that all sighted users have ample luminance contrast for readability, based on the importance of the use-case of the particular text. The only CVD need is prohibiting text that's red against black for protan, and avoiding color pairs that interfere with reading.

Discerning
CVD do have functional problems differentiating some hues, and therefore a user need towards discerning differences between items, particularly for things like color-coded data on a map.

For this reason, the single most important thing to do is to ensure that there is something other than pure color communicating the information. Color, as in Hue and colorfulness, should never be the sole means of communicating information.

This is important for all forms of vision, and all visual users. For instance cultural differences may result in different color interpretations, so rely on non-color dependent indicators to accommodate all visual users.

Accommodating color-coding in non-text largely requires that all color-coded information is discernible and understandable without the color (hue) being present, in other words, make it a functional design in black-and-white first.

"make it right in black-and-white"


Accommodating reading

The content author need only to make sure that all sighted users have ample luminance contrast for readability.

Accommodating differentiation

All color-coded information must be understandable without the color being present.

Color as in hue is a useful tool to enhance information,
but not to be the sole source of information.


Dark Mode

It's important to remember that the contrast calculation in WCAG_2.x cannot properly calculate for dark mode. SC 1.4.3 is not at all suitable for dark mode. Take a look at this comparative example:

DarkModeComparev2_2022

Bridge PCA, APCA-W3, or even DeltaPhiStar can calculate for dark mode much more effectively.

APCA Brief Overview

For the quick intro to modern perceptually uniform contrast, see "Why APCA"

The FAA study on accessible color palettes

rosap.ntl.bts.gov/view/dot/57220
You might find the FAA's study on accessible colors for video displays interesting, at least to skim over.

Modern Color/Contrast Theory

The Realities And Myths Of Contrast And Color
A plain language, as brief as humanly possible yet in-depth primer to vision, color, and contrast for design, with an emphasis on typography and readability needs. Published at Smashing Magazine.

Opinions expressed herein are mine and do not necessarily reflect those of the W3C.

35
  • 17
    "Because usability is accessibility" - this is not always true. For example on SE users can add images to their posts. If you force users to provide an alt text then this would be good for accessibility but bad for usability because it takes more effort to write a post. Or for contrast: SE recently increased the contrast for ignored posts, which obviously makes them more difficult to ignore.
    – Marijn
    Jan 29, 2023 at 17:02
  • 6
    @PM2Ring Yes that should've been cause not cars. So one of the reasons that I am at doing visual accessibility research is that I used to work in the film Industry and lost my eyesight, so now low vision, and I can't always see the stuff that I'm typing, and speech to text less than perfect, and sometimes I miss the mistakes LOL... Thanks for catching it
    – Myndex
    Jan 30, 2023 at 4:42
  • 17
    Hi @Marijn, I understand what you're saying, but let's take a look at alt text the way Twitter Integrated it, allowing all users to read it, and they don't force people to enter alt text, but they do recommend it. Forcing people to enter alt text is arguably bad for usability and also bad for accessibility, because people forced to do something they don't want to tend to throw whatever characters they can into the alt-text, And it's better to have an empty alt-text than gibberish. But the best for both, is AI recognizing what's in the image and creating alt text, with an option to edit it.
    – Myndex
    Jan 30, 2023 at 4:48
  • 3
    Also @Marijn, Why did SE increase the contrast of ignored posts? Personally I prefer junk content being de-enhanced, And arguably that's best for usability and accessibility. .... While this isn't under WCAG2, it's part of what I'm working on for WCAG3, and that is "Use Cases" for text, where primary content needs to have high contrast, but non-primary content like content that should be ignored, is allowed to have lower contrast. See github.com/Myndex/SAPC-APCA/discussions/39 Discussion thread on use cases.
    – Myndex
    Jan 30, 2023 at 4:53
  • 5
    @Myndex I'm not sure why they did, but here's a post from a few months ago from a user regarding the change being detrimental for them: My brain cannot ignore the ignored questions due to contrast change. Please change it back Jan 30, 2023 at 8:00
  • 7
    @Myndex That's the problem. WCAG2 doesn't have that use case and the goal for that change was to be compliant with WCAG2 because 3 is still a draft.
    – Piper Staff
    Jan 30, 2023 at 14:17
  • 8
    I was a bit concerned about the “colors that pass contrast in light mode also pass in dark mode” myself, even without knowing about APCA (thanks for the link!). By my calculations, there’s only a very narrow band of WCAG’s relative luminance, 0.175 to 0.1833…, that can pass at AA regular (4.5:1) on both white and black, never mind not-quite-white or not-quite-black. There are no colours that can pass at AAA regular (7:1) on both light and dark. So aiming to have one colour suit both backgrounds would end up suboptimal on both. Jan 31, 2023 at 13:35
  • 11
    @TimPederick Right. The way I worded that was an over simplification. I didn't mean each stop, but our swap. Right now if we use one color in light mode our systematic swap for dark mode doesn't work ~50% of the time. That is what we aim to fix—the system. Also unaware of APCA and have already shared with the team. Incredibly grateful for this extremely detailed answer.
    – Piper Staff
    Jan 31, 2023 at 15:01
  • 5
    I agree that usability is accessibility; but I am not convinced that it is possible, in principle, to improve that uniformly "for everyone" unless things are terrible to begin with. "For instance, a layout that is filled with lots of bright saturated colors all over the place can be cognitively overstimulating for some." - and a layout that lacks those colours might fail to present important distinctions to others. Jan 31, 2023 at 16:10
  • 7
    "But the best for both, is AI recognizing what's in the image and creating alt text, with an option to edit it." Good heavens, no. I absolutely do not want AI trying to tell other people what my image contains, simply because I didn't pre-empt it. Aside from that, on a technical site if summarizing an image in text were sufficient to convey the meaning of the image then I would, and should, use text. Images are specifically a tool to enhance the experience for those who can visually process them. This is especially a concern for, say, Stack Overflow questions about GUI layouts. Jan 31, 2023 at 16:27
  • 6
    (con't) The entire reason someone would attach an image to a question asking about a GUI layout is because text is insufficient to describe what is wrong with the layout, at least for that user. Inserting AI at that point in the process is effectively asking the AI to communicate OP's ideas on OP's behalf, on the premise that a machine can do it better. That is a) demeaning to OP; b) utterly horrifying from an AI safety perspective; c) dissonant with Stack Overflow's recent policy on ChatGPT-generated content. Jan 31, 2023 at 16:29
  • 2
    (Also, the idea that text just shouldn't be presented at smaller than 14pt kinda galls me. I'm not sure that even means anything, anyway. My browser tells me that the text in this comment box is 13pt, while my OS tells me the text in my terminal is 10pt, but the letters in the terminal are AFAICT slightly taller.) Jan 31, 2023 at 17:01
  • 8
    I'm thrilled to hear that there's an attempt to revamp the weaknesses of the WCAG 2.1 contrast guidelines. I'm really sick of the trend toward low-contrast designs that sacrifice ease of reading for some aesthetic goal. I'm not an expert, but I did some research and experiments to show how the tools that claim to check against the WCAG contrast guidelines don't actually do so. youtu.be/63QJB1qqcZ8 Jan 31, 2023 at 17:57
  • 4
    @Myndex: I think one of the positives of Twitter's implementation is that they have a setting that users can enable for the system to remind them to add alt text. Even if adding alt text is something you want to do, it's not very good if you keep forgetting to do it; being able to opt in to having the system remind you to do so makes it more likely that you actually do it.
    – V2Blast
    Feb 1, 2023 at 16:29
  • 7
    Yipe! "Brighter" does not necessarily mean accessibility friendly. Thank Crunchie it's not just me thinking that when I read the OP. My personal experience with changes SE have made "for accessibility" has been.. not good. The scorecard is currently running at around 90% of these "improvements" making the sites worse for me and I'm having to run a frankly ridiculous level of 3rd party modification to keep the sites readable. Maybe this time with a bona fide expert in this stuff getting a word in before they push a horrible change things might be different! Feb 3, 2023 at 11:37
50
+100

Thank you for making this an intentional part of the site design! As someone with red-green colorblindness, I find the use of red and green to denote opposite meanings to be tough to distinguish sometimes. Using blue in place of green helps tremendously. I know red-green colorblindness isn't the only form, but it's the most common one out there (it actually consists of 4 types: protanopia, protanomaly, deuteranopia, and deuteranomaly).

If colors can't be changed, increasing the area that a color covers is probably the next best option. E.g. using bold fonts instead of thin ones. As an example, it's hard to name the color of the "Discard" text at the bottom while I'm writing this answer:

enter image description here

Based on cultural and context clues I can assume it's probably red (and the specific color isn't terribly important in this instance), but if you asked me "is that text red or green?" I wouldn't be able to tell you. If I increase the font weight to bold or put it next to text of the opposite color then it's easier to tell.

13
  • 18
    I'm also red-green colorblind. Can confirm, I could never tell what color the Discard text is. Not that it's necessary to know (I know you can attest that, over time, you have to rely on intuition), just that it's difficult on a white background with such low font weight.
    – Spevacus
    Jan 26, 2023 at 22:28
  • 15
    FWIW, Coloring for Colorblindness has some good info and tools.
    – PM 2Ring
    Jan 27, 2023 at 6:47
  • 9
    I am not red green colour blind but I have worked at the Highways Agency in the UK. I was humbled to work with our colour blind tester. On a road the red light is at the top but on a railway the red light is at the bottom. Position matters! Jan 27, 2023 at 10:07
  • 3
    About 1 in 20 people are colorblind in some way. Jan 27, 2023 at 10:09
  • 4
    @user10186832 But modern railway signals have only one light, which changes colour. Position is obsolete. But of course, train drivers need to pass a colour blindness test.
    – Chenmunka
    Jan 27, 2023 at 12:58
  • 5
    @user10186832: Indeed it does. Elements should have more than one "dimension", at least the critical ones. Jan 27, 2023 at 15:55
  • 2
    @Spevacus do you mind if I ask if that's why your avatar is mostly in shades of blue?
    – bad_coder
    Jan 27, 2023 at 17:55
  • 4
    @bad_coder Ha! You're fine to ask. Nah, that's just because I found the scene in which this character was doing their thing to be neat. No other reason.
    – Spevacus
    Jan 27, 2023 at 17:58
  • 2
    @bad_coder FWIW my preference for bright primary colors (such as in my avatar) I believe is partly due to my colorblindness. The more saturated the colors are, the easier they are to tell apart. It's probably also partly just a personality thing.
    – Ben Sutton
    Jan 27, 2023 at 23:16
  • 3
    Most web browsers (at least Chrome and Firefox) also have simulators for different forms of color blindness (and Chrome also has those for other visual impairments), if you want to experience the usability for color blind persons.
    – Erik A
    Jan 28, 2023 at 11:52
  • 2
    Color vision deficiency types protan & deutan together are about 1 out of 20, mostly male, making up ~5% of the world population. But CVD type tritan is about 1 out of 50,000. The actual color-blind achromatopsias are (as a group) about 1 out of 30,000, and require assistive technology. Fun fact: even standard vision is tritonopic in central foveal vision, because S cones are scattered only in the periphery.
    – Myndex
    Jan 29, 2023 at 5:41
  • 2
    @Chenmunka not in the UK at least
    – John
    Jan 30, 2023 at 10:27
  • 1
    "even standard vision is tritonopic in central foveal vision, because S cones are scattered only in the periphery." Shouldn't that imply that, if I directly stare at something that's blue, I should stop being able to perceive it as blue? Can't reproduce. Jan 31, 2023 at 17:53
24

We’ve identified the following colors: Orange, Blue/Powder, Red, Green. Orange is used to represent our brand. Blue is used to represent links, buttons, and status. Red is used to represent errors. Finally, green is used to represent answers, status, and success.

Instead of "here are the colors we are going to use and here's what they mean", I think it would be better to approach this from "here are the parts of our interface, and here's how we will communicate information to users about how they work." That might involve color, but it could also be shape, font, location, or other visual cues.

My experience is that the use of colors on the network is very incoherent. Just in the top bar here on Meta, the logo is blue (not orange), you have gold, silver, and bronze in the user's flair, you use red for notifications in my inbox and that the review queue needs looking at but green for notifications that I've gained reputation. All the buttons are gray, not blue.

Sometimes there's a Blue dot to indicate something is "new". In the reputation popup you use tiny dots of color to indicate what type of badge was earned, but you don't carry over the black/gray background that you use on the badges page to distinguish tag badges from the other sort of badges.

Red tags are special moderator-only tags. Some tags are grey and some are blue with no real indication of why. The staff badges are salmon-colored, so I guess that's orange but they're awfully similar to the red tags. I understand a different color for moderator-only tags, but moderator badges are blue, so why wouldn't that be the color of "moderation/moderators"?

If a color has been used very consistently, its meaning becomes intuitively obvious as you use the site. If it is used inconsistently, it is just noise, not information.

For example, how do I know the "Show activity on this post" icon is actually a button I can click when I'm on a touch screen with no tool tips? Why is "Discard" linked text (but red, not blue) and not a button? Are you just going to use a different shade of blue for links I've already visited?

I think "blue means button/link/status" and your other categories are too broad to be useful. For example, in the inbox popup the envelope indicating the "message has been read" status is gray, so blue doesn't really mean "status". It's a highlight that is not positive (green) or negative (red). Often in the current interface color doesn't indicate what kind of thing something is, it's just there to get our attention. If we embrace that, then we can look at the use of color with a more critical eye and see that sometimes we have too many things on the page vying for our attention. We might also think about how a screen reader is going to be able (or not able) to present the information we're trying to convey with color.

If we look at the text under the title of a question:

Asked (date) Modified (date) Viewed (number of views) times. The modified date looks identical to the asked date even though it can be clicked to navigate to the most recent modification of the post.

Is it obvious that you can click on the modified date, but not on the creation date or number of views? Shouldn't it be? In the new scheme would you just make the text blue, or would you also stylize it so that people could tell it was clickable regardless of how well they see a particular color?

15
  • 4
    On the last note about clickable things - high contrast mode on SO does make the clickable things more distinct. However, it leads to, IMO, an overload of visual information. The page looks very busy with every single link underlined. Even the close button on dialogs is underlined because it's a link. Also some parts of the interface look inconsistent when only some are links.
    – VLAZ
    Jan 30, 2023 at 17:18
  • 1
    @VLAZ Which it is why it is important to figure out how to effectively convey that something can be clicked without forcing users to stumble across a tooltip or play pixel hunt with a mouse. I think trying to assign color meanings before correcting some of the more obvious usability issues with the current interface is putting the cart before the horse.
    – ColleenV
    Jan 30, 2023 at 17:21
  • 1
    I fully agree with this. Just wanted to show off something that a lot of users rarely see. I'm pretty sure I didn't know the "Modified" timestamp was clickable before I saw it in high contrast mode. Or if I did, I didn't find out much before that. I know that for years that was not at all clear to me. High contrast, tried to make it clear what's clickable but, to borrow what you said, I feel it was done "cart before the horse" style with rather blindly adding underlines everywhere.
    – VLAZ
    Jan 30, 2023 at 17:25
  • 3
    @VLAZ Shouldn't "high contrast mode" be expected to lead to what average people perceive as "an overload of visual information"? Is it not intended specifically for the minority of people who... don't get enough visual information from the default presentation (because the default amount of contrast is not enough to register to them as contrasting, thus providing information)? Jan 31, 2023 at 16:07
  • 3
    @KarlKnechtel IMO, it's losing contrast with the overload of underscores. I genuinely have trouble reading all the underlined links. Which I guess shouldn't happen. There are multitude of problems- some things are underlined when they shouldn't (I really cannot pick a more iconic example than the x button) and others aren't underlined even though they seem like they should (yet aren't <a> element). Leads to a big discrepancy. The underline itself gets in the way. Moreover, if A LOT of visual information was really the goal, then high contrast utterly fails on multiple places.
    – VLAZ
    Jan 31, 2023 at 16:15
  • @KarlKnechtel Underlines everywhere wouldn't even stand out if the overload of visuals was consistent. See the highlight on watched tags. At least in that screenshot, you can see the tag is highlighted, even if you don't notice the different background. See how it looked when this was initially reported on day 1 of the high contrast mode release
    – VLAZ
    Jan 31, 2023 at 16:15
  • 1
    if too many things are underlined, such that you can't distinguish the underlined things from the non-underlined things, then yes, that actually isn't better than not enough things being underlines. However, that also seems to me like, well, failing at the "high contrast" goal. Jan 31, 2023 at 16:36
  • 1
    @KarlKnechtel "failing at the "high contrast" goal" I mean, I can't say it isn't. Moreover, many changes that are made for the UI seem to never be considered or tested under dark and/or high contrast mode. Hence why from the start of the project, I have been asking whether these modes would finally be considered. This latest announcement finally acknowledged dark mode. Here is hope high contrast is also going to finally show up on the radar.
    – VLAZ
    Jan 31, 2023 at 16:44
  • 2
    Stack Exchange is the real and official name. Don't use wrong name on purpose. Feb 6, 2023 at 12:29
  • 1
    @ShadowWizardChasingStars There’s no space in the logo, which is what I was referring to… “StackExchange logo”. i.e. the logo that that is in the top bar that is not Stack Exchange. Instead of assuming I was being an asshole, you could have asked why I rolled it back.
    – ColleenV
    Feb 6, 2023 at 12:42
  • 1
    @ColleenV you need to distinguish between "The logo belonging to Stack Exchange" and "The logo which looks like StackExchange", otherwise I agree with the edits (but not any snarkiness) Feb 6, 2023 at 12:47
  • 2
    Still wrong. The logo has no space because it's, well, just a logo. The one and only correct name for Stack Exchange is with a space. No idea why you refuse to accept it. I'm flagging this post to let mod decide or lock it. Feb 6, 2023 at 12:50
  • 2
    @AncientSwordRage I distinguished it by not putting a space in it and following it with “logo”. I’m on my way out the door. I’ll wordsmith it for the people more interested in the form than the content later.
    – ColleenV
    Feb 6, 2023 at 12:50
  • 2
    @ShadowWizardChasingStars I have every right to rollback an edit and express myself in my own words. This behavior where you bludgeon me with rollbacks, mod flags and downvotes until I submit to your will is unfriendly and unnecessary. I had a reason for omitting the space, and it's obvious it distracted from the content, so I'm willing to fix it. The correct approach here was to ask me why I rolled back the edit instead if trying to ram an edit I didn't want down my throat. Thanks for making my crappy Monday even worse over one lousy word that's been there for over a week.
    – ColleenV
    Feb 6, 2023 at 13:54
  • 1
    I was today years old when I learned that the "modified" text under the title is clickable (and seems to point to the thing that was last modified, very handy). Thanks a lot for making me aware of this!
    – luator
    Feb 10, 2023 at 7:42
15

Just out of curiosity on the "mundane" evaluation,

Create brighter, accessible friendly colors instead of all colors simply being dark and mundane

- who is it who thinks the current color scheming is mundane, and who thinks that's problematic?

Was this a specific question in a user survey? If so, what are the numbers?

If not, I'm curious as to why that was thought to be a point worth mentioning, since whether something is mundane seems to me to be something that is (to a degree) subjective. I don't think everyone has the same definition of what is and isn't mundane or how mundane it is. That's compared to your following paragraph on the proposed colours, which seems to have a focus on improving consistency of colour usage, which is objective. Isn't a problem that can be described objectively sufficient to motivate the solution? Why bring up a subjective problem with no survey results to back it up?

I'm not asking this because I'm personally against making things "less mundane" (in fact- I myself actually really enjoyed the (2022?) April fool where there were a bunch of themes. My favourite one was the one with bright and vibrant colors and sparkles and such). I'm asking because I think it's important what the majority of people think. Again, I don't think everyone has the same definition of what is and isn't mundane or how mundane it is, and not everyone is like me who likes things with more vibrancy and sparkles.


Update: Now that the changes have gone through, I'm pretty sad. The notifications are less cyan and closer to purple (less "bright/cheery"). Comment flags are duller, comment votes are duller, rep notification bubbles are duller, etc. I'm confused. I thought the changes were supposed to make things less "mundane"?

7
  • 3
    "who is it who thinks the current color scheming is mundane, and who thinks that's problematic?" I do. Does that satisfy your question? I do not believe this change was for the better. You can notice that on the left (the "before") the checkmark doesn't really have "more vibrancy and sparkles" but it's more noticeable. It stands out. The right is muted and looks less "active" as an element. Same with the accept colour change.
    – VLAZ
    Jan 30, 2023 at 7:29
  • 3
    With that said, if you're really into dark and muted, then do try out high contrast dark mode. You will see such dark and muted things as the ignored tags which barely appear as tags or the highlight of questions with watched tags. Yes, the middle question does have a background (rgb(6, 6, 7)) different to the others (rgb(0, 0, 0)) if it's hard to notice on your monitor. For a sufficiently large part of the day, it's hard to notice on my monitor, as well.
    – VLAZ
    Jan 30, 2023 at 7:35
  • 2
    "Does that satisfy your question?" my question is about wider view- not just one person ("Was this a specific question in a user survey? If so, what are the numbers?") But thanks for adding your view. "With that said, if you're really into dark and muted" See my last paragraph :P
    – starball
    Jan 30, 2023 at 8:17
  • 3
    Then I find the question backwards, again. For the decision was made to go to darker and muted beforehand. Which drew criticism. I wouldn't know if there are numbers to support going back from the last redesign. There was clearly documented issue community raised, though. However, where were the numbers to support the redesign into darker colours? Why should there be justification for going back from there, yet you've not asked for justification what led to there?
    – VLAZ
    Jan 30, 2023 at 12:50
  • 1
    @VLAZ Thanks for that info! I'm quite new here on MSE. I didn't start being active here until around November, and the "Recent color contrast changes and accessibility updates" post was made in September. Poor excuse, but yeah sorry.
    – starball
    Jan 30, 2023 at 16:30
  • 1
    I like the dark theme a lot and don't think it's mundane at all... As for the change to the green an experienced user provided their rational and although I personally didn't like the change at first I'm happy with it now.
    – bad_coder
    Jan 30, 2023 at 17:03
  • 3
    "in fact- I myself actually really enjoyed the (2022?) april fools where there were a bunch of themes. My favourite one was the one with bright and vibrant colors and sparkles and such" The ability to choose is the important idea here. Would figure that an AFD prank would contain SE's best UI idea. Jan 31, 2023 at 16:35
13

Ensure colors that pass contrast in light mode also pass in dark mode

Would that also extend to the high contrast modes?

10

How is this going to affect each site's "brand" colour? (the colour that gets used in the buttons, links, and often also in the banners).

Will those be changed in any way? Do any of them require any changes to meet the goals of this project? If so, what strategy will be taken to meet those goals without "stripping away individuality" of the network sites?

3
  • 1
    Button colors are most certainly at risk of changing, even if they are brand colors. This initiative, however, will not cover the network sites with custom themes.
    – Piper Staff
    Feb 9, 2023 at 13:26
  • @Piper can you elaborate? In what way / to what degree they might button colours be changed? Will their hues be changed? Or only their saturation and brightness/luminosity? I imagine that only brightness/luminosity changes are strictly necessary to change in order to meet contrast requirements, but will the hues or saturation values be changing to meet other consistency goals? And what about link and banner colours?
    – starball
    Feb 13, 2023 at 21:49
  • 1
    All colors are subject to change. We are exploring all options (hue, brightness, saturation).
    – Piper Staff
    Feb 14, 2023 at 14:10
9

I would like to remind you guys of this open question:

hot network questions have inconsistent CSS for visited/not visited depending on the site you're on

I asked about this in 2016 and there hasn't been any update since then. Am I right in assuming that this color update will also take this into account?

4
7

Will any changes be made to badges and their colours?

I've always personally found

  • it hard to distinguish between the gold and bronze colours, and
  • that the gold blends into the white backgrounds much more than the silver and bronze such that it looks like an odd-one-out. Perhaps some thin, darker outlining on the icons could help with that.
1
  • 3
    I will flag this for the designer(s) working on the project. Appreciate the input!
    – Piper Staff
    Feb 9, 2023 at 13:26
5

My perception of color is (AFAIK) pretty much “normal”.  But today I noticed that I had a problem with the interaction between code formatting and markup for revision history (a.k.a. edit history):

    “Side-by-side” mode

In the above screenshot (which is from Unix & Linux Stack Exchange), “depends on A” is in code format, and “ A” is an addition.  I have trouble seeing the difference.

(The screenshot is from “Side-by-side” mode in Firefox.  AFAICT, “Inline” mode is identical.  “Side-by-side Markdown” mode is better:

    “Side-by-side Markdown” mode

… because it doesn’t use code formatting (it just shows you the backticks), but it’s still easy to miss if the added part is small.)

Please add this to the list of cases you’re looking at.

1
  • 1
    This is a bug with syntax highlighting in diffs, unrelated to color schemes. It was reported on MSO. Staff acknowledged that it was "a critical bug to fix". 1.5 years later, there is still no real fix. But yeah, why not reinvent the color scheme, huh? Feb 4, 2023 at 9:31
3

Allow me to address the text color on Physics' front page, which has low contrast against the white background.

I added Text color of topics on Physics.SE frontpage, and in a comment it was proposed that I raise the issue in this thread.

2

I'm bothered by a series of claims in the original post

We never want to sacrifice usability for accessibility.

What this should mean is that a method, process, or color selection is developed such that, e.g., someone with color impaired vision can readily use the site and someone like me, who isn't, can also use the site... and enjoy it. In my experience, sites designed to be one thing for every one inevitably excludes those without difficulties to embrace those who have difficulties. Which brings me to...

Our goal here is to be more inclusive, not less.

In the last ten years phrases like that have almost always meant, "the majority should willingly give way to the minority." Please don't misunderstand me, I'm all for ensuring the fullest accessibility! But rather than providing a simple and/or straightforward means of achiving that goal for everyone, inevitably we get stuck with...

the Stack Overflow designers plan to redefine the colors within our design system, Stacks

Which is a complex and programmatic solution that the average user is unlikely to be competent to install and work with. But what really gripes me is when we get to...

We will design our new color system around these and share what we come up with...

Which sounds an awful lot like what you're going to do is pick a minimalist color set that ensures (theoretically) that everyone can readily perceive and use all the stacks — so long as the majority who doesn't need anything to change is willing to give up their comfort for those who need it.

One more time... I have no problem with providing maximum accessibility! But suggesting that we'll have one color set imposed on everyone feels like early 1990s tech to me. Have I misunderstood something, or are we really talking about selecting one color set? If so, why? In an age when I can change the color of the light in my room by flipping the switch a couple of times... why?

Why wouldn't Stack Exchange create a user-profile-based color selection system? And why wouldn't one of the choices be, "change nothing?"

Maybe I'm missing something. I hope I am.

  1. Stack Exchange's design system is far too complex for the average user to use to create a custom color set. And yet if you want to be 100% inclusive, the option of a custom color set is required.

  2. Stack Exchange selecting colors feels arrogant to me. Here in the U.S., the color red means stop and error while in China it symbolizes joy and happiness. It's common to find red wedding dresses in China reflecting the good fortune wished upon the happy couple, while here in the U.S. we frequently use white. Yes, I'm using examples that don't have much of anything to do with a color monitor, but my point is that forcing a color choice on the world doesn't seem useful because I don't think Stack Exchange programmers can know what the entire world needs.

Unless we're talking about a very, very restricted number of screen objects, There won't be one set of colors that will be universally acceptable to everyone.

On the other hand, it makes a lot of sense to give people the ability through their profile settings to easily and quickly shift to one or more high-contrast color settings, or color combinations to avoid documented color blindness problems, or at least one standards-based selection.

And if none of those work for a specific user, give us a link in our profiles that opens a list of screen objects and let people choose a custom color set that works for them. That would be as inclusive as anyone can possibly be without having to become a programmer to do it.

17
  • 6
    Sites like SE (this has been stated and justified) rely on having a good set of minimal default settings, because the less configuration options a user is faced with the simpler the experience is. Afaik red and green traffic lights are more or less universal, developing a good color code that's simple, consistent, intuitive and works for everyone seems possible. I also think you're taking an overly negative view of the project, personally I've seen SE's design going from strength to strength and I expect more eye candy to come.
    – bad_coder
    Jan 31, 2023 at 6:53
  • 1
    @bad_coder Thank you, but I continue to disagree. Some people appear to want customization more than compulsory solutions. I, too, am not a fan of compulsory solutions.
    – JBH
    Jan 31, 2023 at 7:22
  • 7
    "Which is a complex and programmatic solution that the average user is unlikely to be competent to install and work with." The average, or even the above-average, user is irrelevant here, though. Stacks is the system that is used around the network. All redefining the colours means is that they'd be changed around the network. No user needs to interact with Stacks at all. Users can use Stacks in their projects but that's not a requirement. Also, I'm not really sure if the version of Stacks distributed uses the same colours or has overrides or whatever.
    – VLAZ
    Jan 31, 2023 at 7:31
  • 1
    @VLAZ Does your comment make sense to you? My issue is that the choices given to users will be either too little or too complex. How would you go about solving the problem if the final solution is a color scheme you're not comfortable using?
    – JBH
    Jan 31, 2023 at 8:14
  • 1
    In terms of your comments on arrogance, at some point, I think UI conventions should be acceptable and sufficient to address that concern. Just as not everyone speaks english, but we require English on Stack Exchange, it's not trivial (unfortunately) to cater to every culture's intepretations of colours. Or at least- that's not something that site designers often even think about. It could be addressed with user-selectable colour themes, but it depends how much effort SE is willing to put into this. I don't really expect something like that from any site. At least right now.
    – starball
    Jan 31, 2023 at 8:14
  • 1
    @user I used ethnic interpretation of colors as an example to make a point, which is why I continued, Yes, I'm using examples that don't have much of anything to do with a color monitor, but my point is that forcing a color choice on the world doesn't seem useful because I don't think Stack Exchange programmers can know what the entire world needs.
    – JBH
    Jan 31, 2023 at 8:15
  • Do you complain about the usage of red to every site you use that uses red in the way that it's being proposed to be used here? :P Just curious. Sounds like a lot of work.
    – starball
    Jan 31, 2023 at 8:16
  • 1
    @user I beg your pardon, but do you suggest that people shouldn't voice their opinions on the other stacks you visit?
    – JBH
    Jan 31, 2023 at 8:20
  • 1
    @JBH "Does your comment make sense to you?" Yes. You said that Stacks is too complex to use for regular users. And I don't see the reason for regular users to use it at all. Hence why I clarified what Stacks is and what changing the colours in it does - it's nothing that an average user needs to ever concern themselves with. Because it's irrelevant for the vast majority of users.
    – VLAZ
    Jan 31, 2023 at 8:33
  • "How would you go about solving the problem" Me personally? Write a userscript or userstyle. Like, say, if I feel there are too many underlines, or add highlight to keyboard shortcuts (because it disappeared), fix transparency issues with avatars. I feel like I shouldn't have to do that. Yet, here we are and I'm patching the UI on my own, so I can see and use it better.
    – VLAZ
    Jan 31, 2023 at 8:33
  • 1
    @VLAZ Are you prepared to write scripts to change colors for everyone who feels uncomfortable with the system default? My entire complaint is that far too many users of Stack Exchange don't have the programming skills to solve the problem. (Why are we arguing? You're doing a great job of making my point.)
    – JBH
    Jan 31, 2023 at 8:41
  • 4
    @JBH I'm not arguing, TBH. The only thing I initially did was to point out your mention about Stacks being above the average user was irrelevant. Because it is. I don't think anybody would or should deal with Stacks in order to use the site. This is true now, and I don't see any change even if the colours are updated in Stacks. I didn't express agreement or disagreement with anything else. When you questioned about how I'd solve being uncomfortable using the UI, I vented a bit that I already did that. And I didn't like it.
    – VLAZ
    Jan 31, 2023 at 9:29
  • The thesis here seems simple and obvious and I legitimately can't understand the objections to it. The premise of the "accessibility update" is that the site would change the colours that it imposes on everyone, for the sake of making it easier for specific people to use the site. The response is that there's no good technical reason why the site has to impose colours on people, and that changes that, say, improve visual contrast for some people make the experience less aesthetically pleasing for others. There is no universal cultural meaning for colours; that's kinda inherent to "culture". Jan 31, 2023 at 16:02
  • Re "red and green traffic lights are more or less universal": Yes, but they (always?) have position as well, not relying on a single "dimension" for a critical or important function. (Though the earlier train signal example was rather troubling; perhaps someone forgot their HMI ABC?) Feb 3, 2023 at 17:04
  • 1
    What you seem to have missed is that I agree with you that the colors can and should be changable by the user, and am speaking in support of you. Feb 4, 2023 at 15:10
2

I entirely agree with this, but if possible can we have some sort of dark mode along with this? Light mode currently hurts my eyes.

9
  • There is a dark mode on Stack Overflow - you need to go to your user settings to enable it. Only SO has a dark mode, though, not any other sites.
    – VLAZ
    Feb 8, 2023 at 15:07
  • @VLAZ: That's the issue. I used to participate in both Meta and Meta SO, but stopped doing so because they don't support dark mode, and the lack of it is causing difficulties with my eyes on other sites. If they have it working on SO, and it's been doing so long enough to pass all testing requirements, why can't it be expanded to other SE sites as well by now?
    – Ken White
    Feb 9, 2023 at 14:38
  • Dark mode on MSO and MSE is already planned and there’s already a version of it, but it’s only available to Stack Exchange staff. Feb 9, 2023 at 14:40
  • 2
    @KenWhite if you find that you're often dealing with white colors too much and hurting your eyes, I recommend dimming the brightness on your monitor, or enabling the warmth setting in Windows. It's tedious but it sounds like it'll help solve a problem you're struggling with Feb 9, 2023 at 21:37
  • @KenWhite "and it's been doing so long enough to pass all testing requirements" it's been up for a while. But how well it passes is another matter. I often feel like dark mode and high contrast dark mode are passed over more often than not, though.
    – VLAZ
    Feb 9, 2023 at 21:46
  • I hope dark mode is available through all SE sites, tbh. Feb 10, 2023 at 13:40
  • @TankorSmash: Why should I have to adjust my monitor when SE has the code available to make their sites support dark mode? Other sites I frequent support dark mode because that's what I have my OS set to use, and SE has tested, functioning support that is shown to work on SO.
    – Ken White
    Feb 12, 2023 at 3:04
  • @VLAZ: It works perfectly well on SO, and even if it didn't it would be better than no support at all. This is another case of SE failing to complete something because they're no longer interested in their users, only in increasing the bottom line by attracting more advertisers.
    – Ken White
    Feb 12, 2023 at 3:05
  • 1
    @KenWhite You mentioned other websites were also causing you problems too. Hope you are able to find a solution within your control! Feb 12, 2023 at 20:48

You must log in to answer this question.

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