119

At some point during the day, quoted background, in I assume CSS, has been switched from yellow to white.

This is harder to find within an existing text, since the background color is the same for the whole text.

For some, white is harder on the eyes anyway together with the thin letters.

I don't think it is an improvement, since a major goal of a quote is to distinguish it clearly from the rest of the text.

So it would be nice if quotes would be reverted back to the original yellow.


Update based on some comments:

I don't really understand the argument about black on white being harder on the eyes.

For me it is like the sun light is being reflected off a sign - you have to squint to read it and thus a strain on the eyes.

A yellow background absorbs this glare, bringing a better contrast and is therefore easier to read

  • that is why in central Europe many traffic signs use a yellow / black combination for better readability under all light conditions.

For this reason also, I use note paper with a yellow background with black ink.

But I don't get the argument that it is harder on the eyes. I understand that it is harder than when it was black on yellow.

Black on yellow doesn't seem to be the problem, more the gold bar on yellow. A black bar on yellow would resolve that.

But in that case, why just complain about blockquotes? Why not complain about non-blockquote stuff that is black on white throughout StackExchange.

Where I have the choice, I do set the background to a (for me) more readable yellow background with black letters

  • notice the combination of light grey/yellow inside the table
    • which is not supported with the stackexchange Markdown

I mainly use stackexchange with the android mobile Chrome web version, where the offered plugins don't seem to work.

(Android Epsilon Notes application) enter image description here

These are the main background / quote colors that I use to avoid the 'glare' problem:

enter image description here

Just as in the markdown application allows setting for specific colors, stackexchange should offer a user profile setting so that the user can determine what colors they are comfortable with.

  • 4
    See here for details of this change: Some improvements to blockquotes – nekketsuuu Mar 10 at 0:00
  • 48
    I am a young adult with 20/20 vision, and I find it hard on the eyes too. I completely agree with this and would very much love the previous choice of the color to be reverted. – Nimesh Neema Mar 10 at 3:11
  • 3
    I don't really understand the argument about black on white being harder on the eyes. That's how all content is including blockquotes and most of the q and a on the network should (hopefully) be original content instead of mostly blockquotes. I would understand your argument if you were talking about a dark theme or even just making the background darker. But singling out blockquotes doesn't make sense. – Kodos Johnson Mar 10 at 3:24
  • 38
    Blockquotes have not been black on white for years, this is exactly the problem under discussion. The entire point is that now it's very difficult to visually isolate blockquotes from regular content, even for those with good eyesight (I'm one of them). This doesn't help people who need the greater separation and it doesn't help anybody who didn't. – Nij Mar 10 at 4:00
  • 5
    @muru I know that it was different before. And FWIW, I am against the change as well. But I don't get the argument that it is harder on the eyes. I understand that it is harder than when it was black on yellow. But in that case, why just complain about blockquotes? Why not complain about non-blockquote stuff that is black on white throughout StackExchange. – Kodos Johnson Mar 10 at 6:16
  • 1
    I think the yellow to white change is an improvement on web design. – Aryan Beezadhur Mar 10 at 11:49
  • 5
    @AryanBeezadhur Giving some reasons why you thing so would be nice, so one could compare them to the different reason's given for retaining the previous yellow value. – Mark Johnson Mar 10 at 11:56
  • 1
    @MarkJohnson I think that yellow does not fit in with SE’s web design, which is mostly black, white and blue. Actually I have changed my mind partly, white and grey is less visible, but going back to yellow is not a solution. We should change the color to Blue! – Aryan Beezadhur Mar 10 at 12:43
  • 4
    @AryanBeezadhur Blue (#0000ff) is a dark colour ; Yellow (#ffff00) is a light colour ; white (#ffffff) is a bright colour ; Dark letters should not be combined with dark or bright backgrounds for readability (contrast) purposes. When needed a light colour should be dimmed, such as pale yellow (#fdf6e3). This should be rule # 1 when designing something that will mainly be read. That it looks 'cool' should be rule # 314159265359. – Mark Johnson Mar 10 at 13:09
  • 7
    @sth For RPG.SE a significant portion of the text is in block quotes because rules text needs to be cited to back-up the point an answerer is making – illustro Mar 10 at 18:53
  • 8
    @sth Foe history.se also uses a lot of quotes for obvious reasons. – Mark Johnson Mar 10 at 20:21
  • 15
    Keeping up with the Joneses on Web Design is not what SE exists to do. Formatting exists to increase readability and discernibility, not to add whitespace or make rounded corners. There is no improvement to make on the color scheme of white, black, and blue, with a nearly complementary yellow. There is no reason other than an arbitrary one, to change something that worked for 11 years. – Mazura Mar 12 at 1:18
  • 6
    @AryanBeezadhur, you state, "I think that yellow does not fit in with SE’s web design". Yet, the same yellow is prominently displayed on every page on every SE site in the upper right section showing The Overflow Blog, Hot Posts, etc. This is clearly already part of SE's web design, and has been for a long time. If this yellow were so anathema, why has this been used so prominently for so long? This looks very much like "young developer seeks to make his mark", and also "solution in search of a problem". Add in a dash of "arrogance" and "ignoring userbase". Mazura nails it. – Eiríkr Útlendi Mar 17 at 18:02
  • 5
    Please bring back the yellow block-quote... at least don't use the current white one. – Rickross Mar 20 at 13:24
  • 1
    @MarkJohnson There are a variety of ways to add your own CSS or JavaScript to webpages. Personally, I have adjustments that are both CSS and JavaScript, so I have a personal userscript, which is managed by the browser extension Tampermonkey (an open source alternative in Violentmonkey). I also use a large number of other userscripts, mostly open source and publicly available, that have been written for use with Stack Exchange, which, IMO, significantly improve the SE experience. To be honest, I wouldn't want to use Stack Exchange without userscripts. – Makyen Apr 4 at 22:34
12

I made a Google Chrome extension to revert the recent changes to line height, colors, padding, etc.

I've included an option to revert the blockquote styling as well.


Download Google Chrome Extension


Instructions:

  1. After installation, click on extension icon (top-right)
  2. Under Blockquote styling choose Yellow background

Blockquote styling: Yellow background option

| improve this answer | |
  • 11
    +1. It is amazing! What about writing a new extension for ALL StackExchange features? What about making a new stack exchange website? – C.F.G Aug 30 at 14:24
  • 1
    @C.F.G Codidact and TopAnswers, but I'm not ready to give up on SE yet – especially not over poorly-thought-through CSS. Not after everything else. – wizzwizz4 Sep 4 at 22:45
9
+50

Since SE do not intend to revert this change, I have written a simple user script that tries to recreate the appearance of quotes before this change.

Here is a screenshot:

reverted quote colours

Download to Tampermonkey

See it on StackApps

GitHub Gist

| improve this answer | |
  • 4
    Why a user script? Wouldn't it be far easier and more efficient to just add custom styles into something like Stylish? Even without it, why are you manually changing the background for every single blockquote on the page versus injecting some styles into the <head>? – animuson May 12 at 19:03
  • 1
    @animuson I'm using JavaScript to loop through every occurrence of <blockquote>. Check the GitHub Gist to see the code, it's really simple – Aryan Beezadhur May 12 at 19:04
  • 12
    I understand that. I'm saying that's a really bad, inefficient way of doing it. – animuson May 12 at 19:04
  • 8
    I think that user scripts are much more widely used. I don't even have Stylish. I will make this a browser extension if that will make it more accessible for non-tech-savvy users. – Aryan Beezadhur May 12 at 19:05
  • @animuson And also Stack Exchange welcomes scripts on Stack Apps. In addition, Stylish only has 1 million downloads, as opposed to Tampermonkey with 10 million downloads – Aryan Beezadhur May 12 at 19:12
  • 8
    That data means nothing to me. That only tells me people are more likely to want to inject additional functionality into a site than change styles - the two extensions serve different purposes. But past that, it doesn't address my point that the way you are achieving this result is the worst possible solution to it. Something like $('head').append('<style type="text/css">.post-text blockquote { background: var(--yellow-050) !important }</style>') would be far simpler, not require so many @match declarations, and work naturally with dark mode. – animuson May 12 at 19:27
  • @animuson importing jQuery slows down page load significantly. And also it doesn't matter which one I use, I still need @match declarations to declare which sites the user script should run on – Aryan Beezadhur May 12 at 19:31
  • 6
    jQuery is already loaded on the site. You don't need to import it. And you have multiple @match declarations for each site because you are limiting them to specific parts of the site, which is just wasting a lot of space. You could easily just trigger for everything on each domain if you used a stylesheet to target only specific blockquotes. – animuson May 12 at 19:34
  • @animuson I've updated the user script to apply to all domains (*). But I don't want to use jQuery instead, since with another user script I made (for SE), applying jQuery just like that messed up with the site's scripts. So instead, it checks if there are blockquotes on the page, and then loops through them one at a time when applying the CSS. And I'm using the .style=""; JS attribute since the style attribute has more importance than styles in the head with !important. – Aryan Beezadhur May 12 at 19:39
  • 8
    Your last sentence is simply untrue. The only thing that can override an !important is another !important. Inline styles do have very high specificity, but not enough to override an important. If jQuery wasn't working for you in a user script, you probably weren't running it in a ready function to make sure it's finished loading. Even without jQuery, it is still possible to insert a stylesheet with plain JS. But either way, this isn't a great place to explain how user scripts and CSS work. I'd recommend learning more about all them before trying to create user scripts for other people. – animuson May 12 at 19:44
  • 2
    You don't need that if in your code, you could just do for (const element of document.querySelectorAll('etc')) { doYourStuffWith(element) } - if there's nothing found by the selector, it won't enter the loop (but I agree that the solution suggested by @animuson is much better than this loop) – hkotsubo May 12 at 19:47
  • 2
    I have a userscript and stylus script posted in correlation with this answer. Just implemented dark mode friendliness into it. This entirely reverts the blockquote style though - it doesn't just change the background. – Zoe The Lockdown Princess May 21 at 9:03
  • 1
    Yes, please make it a browser extension, that will make it accessible to a wider audience. – LemmyX May 21 at 21:20
  • 1
    Please also just post the CSS selector for targeting the quotes that you use so those of us who use Stylus or similar user-style addons can just grab that part. – TylerH May 22 at 14:00
  • 1
    I've made a Chrome extension with the option to style blockquotes as yellow: chrome.google.com/webstore/detail/revert-stackexchange-form/… – Prid Aug 30 at 5:25
5
+100

The best solution would be to add some global color settings to the users profile that would be valid throughout all sites.

The main goal should be readability for the person reading the text, not that it looks pretty to the web designer.

Only the user themselves can determine this properly.

Some uses may prefer a small, thin fonts with a light grey color with a white background (as some sites offer as the only option) - but for me that is completely unreadable, unless I select the text (thus inverting the colors).

This has been problem # 1 since the introduction of colors on computers.

The best solution has always been to let the users deside for themselves what they are more comfortable with, since they are the ones that use it.

| improve this answer | |
  • I agree with your good suggestion. I am not sure whether to award bounty since the reason behind bounty was to get resonce from staff. – Pandya Sep 8 at 6:58
  • @Pandya Where this changed was introduced (1 vote) and feedback asked for: Some improvements to blockquotes, there was no reaction to the mostly negative feedback (the highest with 177 votes). – Mark Johnson Sep 8 at 8:11

You must log in to answer this question.

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