-4

When we use code blocks, created for example by the "Code Sample" button ({}), the background is so light:

Example: hsl(0,0%,96.5%)

But when we use backticks (`) to create inline code the background is darker:

Example: hsl(210,8%,90%)

Please make the background in the former example as dark as the latter one (Or even a different color such as purple, etc.). Some eyes can't differentiate that light shade from pure white.

12
  • 2
    Comments in code blocks are shown in gray, they would be hard to read if the background had the same colour Dec 21, 2023 at 15:24
  • 4
    What "function" are you talking about? What is a "card"? I have no idea what you're asking here and not sure you even talk about Stack Exchange. If so, please use the terms used in Stack Exchange. Dec 21, 2023 at 15:25
  • 2
    @ShadowWizardLoveZelda The question seemed perfectly clear to me. I edited it so hopefully it's perfectly clear to you too.
    – Laurel
    Dec 21, 2023 at 16:10
  • 5
    Related: conflicting request to soften the contrast on inline code. We have an existing item to review and consider the background color (and visual design overall) of both code blocks and in-line code. I'll add a link to this post for additional context.
    – Carog Staff
    Dec 21, 2023 at 16:22
  • I'm really sorry. My bad. I will edit my question. I didn't mean the site background by background. I meant the card itself Dec 21, 2023 at 17:08
  • 2
    @SnackExchange It is very hard to understand what you mean with "card". Was "background" not the much better term? Dec 21, 2023 at 17:10
  • @samcarter_is_at_topanswers.xyz It was also Shadow's question. But Laurel edited the question in their response to make it clear. If you still have the question "card" is the area with different color around the code: A. Also we have OP cards which are the colored areas around the OP's username. Dec 21, 2023 at 17:14
  • Consider rolling back your edit. Laurel's version was much easier to understand. Dec 21, 2023 at 17:17
  • 2
    About the edit: It's clear from the context which "background" is being referred to but "card" isn't really accurate here. In "user card" for example, "card" doesn't refer to the background but rather the grouping of several elements (image, username, rep/badges) all in a single visually distinct container, usually one that's only a fraction of the width of the page. If I wanted to talk about the blue highlight behind "asked 2 hours ago", I would say it's the "user card background". See also Bootstrap's card examples.
    – Laurel
    Dec 21, 2023 at 17:45
  • 2
    I'd vote this up for bringing the discrepancy to our attention… but down for wanting the darker colour. So that's a net zero from me ;)
    – Tetsujin
    Dec 21, 2023 at 19:34
  • @samcarter_is_at_topanswers.xyz I rolled it back. But it was just a single word. I don't think it was that important Dec 21, 2023 at 20:45
  • 3
    @SnackExchange but it is important, and the reason I initially voted to close as unclear. Card is "piece of thick, stiff paper or thin pasteboard, in particular one used for writing or printing on", or "a small rectangular piece of plastic containing personal data in a machine-readable form and used to obtain cash or credit or to pay for a phone call, gain entry to a room or building, etc", it is not what you try to post about here, and I have no idea what made you use that word, but it's just wrong and misleading. Lucky for you, others were able to understand and edit to a proper shape. Dec 22, 2023 at 13:29

2 Answers 2

8

Personally, and for accessibility reasons, I think the first is just fine, the second too dark [legible for me, but perhaps not for sight-impaired].

I have a fully calibrated system & displays, so my first inclination if you can't differentiate is that your display is incorrectly calibrated*, not that your eyes can't differentiate. I don't have an on-screen meter that works in HSL, but in RGB the first is 246, 246, 246, the second 227, 229, 231 [so not a 'perfect' grey].

Laurel's backgrounds also render at 246, 246, 246

Just to note, Apple's light grey background is 236, 236, 236 - so splits the difference. Their inactive window is actually 246, 246, 246. Windows [running in VM & not independently calibrated] also appears to use 246, 246, 246, so maybe the designers were copying these widely-accepted defaults.

*Manufacturers have a terrible habit of making displays over-contrasted [darks too dark, lights too light] & over-vibrant [big, punchy, inaccurate colour] by default, which makes them look attractive on the shop floor, but useless for colour-sensitive work.

2
  • I don't have any problems in differentiating that light color from white. I meant sight-impared people by some eyes. Dec 21, 2023 at 19:49
  • 6
    Well, organisations with far greater resources than me seem to think 246 is absolutely fine. When you say 'some eyes' then, you're guessing, with no factual/research backup.
    – Tetsujin
    Dec 21, 2023 at 19:52
3

I agree that the contrast is too light in code blocks, since at certain angles it looks just like the white background on the rest of the page. It might also be too light in inline code too. And not everyone is as sensitive to fonts for that to be a good indication that there's something different about this particular part of the text.

See block code background contrast rating and inline code background contrast rating (which are both rated poor, albeit on a scale meant for text); also inline code text contrast (showing that black text at least does offer enough contrast).

As one of the comments pointed out, darkening the background may make it hard to see certain parts of the syntax highlighting, where the text isn't black. As an alternative solution, a border of some sort could be added to code blocks while keeping the existing background color. Since it doesn't touch any text, this border can be as dark as it needs to be. For example, this uses box shadows for a border that looks a little fancy:

pre {
  background-color: hsl(0,0%,96.5%);
  box-shadow:       .25rem .25rem #bbb, -.25rem -.25rem #bbb;
}
<pre><code>Background: hsl(0,0%,96.5%)
Border: #bbb
</code></pre>

5
  • The border is too close to the text in the left side Dec 21, 2023 at 18:35
  • 2
    @SnackExchange You're right, but this is just a basic demo, with just enough code to give you an idea of what it could approximately look like.
    – Laurel
    Dec 21, 2023 at 18:40
  • Your contrast rating references are against white text… of course it's going to be poor. Against black text it's great. If you're looking at this page in dark mode, all bets are off… or at least should be recast for that basis.
    – Tetsujin
    Dec 21, 2023 at 19:56
  • @Tetsujin I only added that so you can see the numbers. My own eyes are telling me the contrast is not enough—and I don't have any particular visual impairment. The background for me on code blocks frequently looks the same as the white background on the rest of the site.
    – Laurel
    Dec 21, 2023 at 20:02
  • Another thing worth noting here is screen differences: different screens/ monitors have different contrast levels. I doubt it's much of an issue on mobile devices, but folks with screens that have high contrast settings (whether by intention or not) will also have a hard time distinguishing the code block background. Speaking personally, if I crank my monitor's contrast setting to 95+, the code block background simply disappears... I don't enjoy running my monitor that way, but I don't think high contrast settings are wildly uncommon, either.
    – zcoop98
    Dec 28, 2023 at 18:02

You must log in to answer this question.

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