20
$\begingroup$

I was just on the main site, tweaking my color settings, when I noticed that it may be difficult to see block quotes, which are a light palish color, against a white background. For the color blind, I imagine this is much worse.

To the color blind: Are block quotes hard to see?

And what are some alternatives to block quotes that allow emphasis on an entire paragraph or more of text and/or MathJax?

$\endgroup$
9
  • $\begingroup$ "... tweaking the color settings." The settings on your computer? Or do you use a custom CSS for Math.SE? $\endgroup$
    – Mike Pierce
    Dec 3, 2017 at 17:55
  • $\begingroup$ @MikePierce On my own monitor. $\endgroup$
    – Simply Beautiful Art
    Dec 3, 2017 at 17:56
  • $\begingroup$ @MikePierce You just want his stylesheet, don't you? $\endgroup$
    – Xander Henderson Mod
    Dec 3, 2017 at 21:53
  • 5
    $\begingroup$ @XanderHenderson ... maybe. ;P It would be nice to have a CSS for a MathSE night mode. This site is very bright at night. $\endgroup$
    – Mike Pierce
    Dec 3, 2017 at 22:15
  • 2
    $\begingroup$ Looking at the answer below, since this is an issue, should it be brought to the attention of the folks in charge of the MathSE site style? Should we request that either the block-quote yellow be changed to a more friendly color, or that the vertical bar to the left of the quote environment be made more substantial (instead of just being darker yellow)? $\endgroup$
    – Mike Pierce
    Dec 3, 2017 at 22:24
  • $\begingroup$ @MikePierce Oh yeah, I too request the night mode. I mean... I'm not up that late. >.> $\endgroup$
    – Simply Beautiful Art
    Dec 3, 2017 at 23:35
  • $\begingroup$ I usually don't have problems with the blockquote background. But admittedly, there were a few times where it was a bit too similar to the background for me. I can't quite put my finger on when that happened. But it did not happen with my phone or my computer (or at least not with Firefox/Chromium) as far as I remember. $\endgroup$
    – Asaf Karagila Mod
    Dec 4, 2017 at 11:55
  • 2
    $\begingroup$ @MikePierce: You can, with a bit of Javascript (like in my 'answer'), easily modify any site to have your own favourite kind of night-mode, since Javascript can of course check the time. =) $\endgroup$
    – user21820
    Dec 7, 2017 at 7:03
  • $\begingroup$ I once logged in to this website from a Mac, I thought it looked a lot better overall. But then again, that was a year or so ago, plus I don't remember whether the display had been calibrated; I sure haven't calibrated my own display. $\endgroup$
    – David R.
    Dec 14, 2017 at 22:02

2 Answers 2

Reset to default
23
$\begingroup$

I am delighted that you are considering this issue.

I am slightly red/green color blind. It is nearly impossible for me to see the block quotes on math.stackexchange.

A light grey background would solve the problem completely for me. A solid or dotted black line along, say, the left the border could serve to distinguish a block quote from piece of computer code.

Of course, this might clash with other features that I am not even aware of.

One could potentially use a box with a thin black boundary to place emphasis on a single paragraph. I sometimes use the package mdframed to this end when writing a chapter.

$\endgroup$
7
  • 2
    $\begingroup$ StackEdit takes that approach (a solid line along the left border) to highlighting a block quote. $\endgroup$
    – hardmath
    Dec 3, 2017 at 20:20
  • 2
    $\begingroup$ Interesting. I'm also slightly red/green color blind, but I see the block quotes just fine. $\endgroup$
    – Asaf Karagila Mod
    Dec 4, 2017 at 11:55
  • 1
    $\begingroup$ @AsafKaragila :P perhaps it also depends on your color settings. $\endgroup$
    – Simply Beautiful Art
    Dec 4, 2017 at 12:19
  • $\begingroup$ @Sim: Yes, it probably depends on many variables. $\endgroup$
    – Asaf Karagila Mod
    Dec 4, 2017 at 12:30
  • $\begingroup$ See my answer for one possible way to fix this issue for yourself, on every site that you wish. It's ideal for web designers to make their site friendly to colour-blind people, but it's not even always possible, since for example there are many different variants of colour-blindness and practically nothing works for everyone. And besides, even those with 'normal' vision like myself simply detest some visual layouts and just want to 'fix' them! =) $\endgroup$
    – user21820
    Dec 7, 2017 at 7:21
  • $\begingroup$ @user21820 I appreciate the time and effort that you have put into finding a workaround. I really do. However, I encounter it so rarely, that I can't justify spending time learrning to apply your solution. $\endgroup$
    – Carl Christian
    Dec 7, 2017 at 13:55
  • $\begingroup$ No problem; in the future if you ever want to know how, you could ping me and I will gladly help you. It is actually nothing more than installing the addon (called GreaseMonkey) and creating a new userscript and copying the code I provided inside. If you don't know Javascript, then you could ask someone you know who does, if just to assure you that my code is safe. =) $\endgroup$
    – user21820
    Dec 7, 2017 at 14:28
7
$\begingroup$

This is not an answer to the original question, but does not quite fit into a comment, and yet it is an extremely useful and fully customizable tool to solve the hard-to-see issue immediately.

If you use GreaseMonkey and know CSS, you can easily fix such issues with any site you use. Just create a new userscript as follows:

// ==UserScript==
// @name        Display Control
// @namespace   user21820
// @match        *://stackoverflow.com/*
// @match        *://meta.stackoverflow.com/*
// @match        *://superuser.com/*
// @match        *://meta.superuser.com/*
// @match        *://serverfault.com/*
// @match        *://meta.serverfault.com/*
// @match        *://askubuntu.com/*
// @match        *://meta.askubuntu.com/*
// @match        *://*.stackexchange.com/*
// @match        *://stackapps.com/*
// @match        *://mathoverflow.net/*
// @version     1
// @grant       none
// ==/UserScript==
style=document.createElement('style');
document.head.appendChild(style);
stylesheet=style.sheet;
function css(selector,property,value)
{
    try{ stylesheet.insertRule(selector+' {'+property+':'+value+'}',stylesheet.cssRules.length); }
    catch(err){}
}
css(".post-text blockquote","background","#ddd !important");
css(".post-text blockquote","border-left","2px solid #bbb !important");

To figure out what CSS rules to construct (for other issues on other websites), you would need to learn how to inspect the DOM content (which may be easy or hard depending on your browser).

$\endgroup$
3
  • $\begingroup$ Trevor, thanks for putting in rules to match SE sites, but how sure are you that it covers all of them? $\endgroup$
    – user21820
    Dec 8, 2017 at 5:59
  • $\begingroup$ I took these rules from a popular user script on stackapps. I figure whoever wrote it took the time to verify all the site names (most of them are *.stackexchange with a few notable exceptions). Thinking more about it, I don't think you even want this to run on more than just math.stackexchange because the css is different on the other sites. $\endgroup$
    – Trevor Gunn
    Dec 8, 2017 at 13:51
  • $\begingroup$ @TrevorGunn: Yes different sites have different CSS, so it would be up to people to customize this as they wish. Thanks! $\endgroup$
    – user21820
    Dec 8, 2017 at 13:57

You must log in to answer this question.

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