Poor contrast for monospace code literals

[jeromekelleher]

The light-grey font used for code literals is difficult to distinguish from the background, e.g. this example:

[benjeffery]

Here are two proposals (as advised by One):

Bold monospace text:

Green monospace text plus underline links to compensate:

[jeromekelleher]

I like the green version, but maybe someone with a better eye for legibility could take a look? (Would you mind posting a link to this issue to the Slack @benjeffery?)

[petrelharp]

I don't like underlined links so much myself, so I guess I vote the grey version? They both look fine though.

[bhaller]

I vote for the grey bold version, out of those two. But the only reason bold is needed with the grey text is because the text is grey in the first place, making it low-contrast, right? How about just making the monospace text be monospace, but without a change in the text color? Just the difference in font seems sufficient to me. I think white monospace non-bold would probably be my first choice.

[jeromekelleher]

How about just making the monospace text be monospace, but without a change in the text color?

That could a good one - would it be easy to try out @benjeffery?

[castedo]

My first reaction was that grey version by far looks better and has the following logic:

• green bold is consistent with link style on Wikipedia and many modern websites (underline is default anchor style from distant web past)
• subtle grey bold is appropriate because it doesn't seem that important a signal because functionally that text is not that diff (in contrast to hyperlinks)

To be honest, my first first reaction was not really believing the 2nd one was a serious proposal, more of a give a client a choice between the right choice and an obviously wrong choice just to give a client a choice. :laughing:

[benjeffery]

Here are two more, white based on @bhaller and a stronger grey.

[bhaller]

I like the white non-bold the most. The first gray bold would be my second choice since it has a similar visual density to the white non-bold (the gray makes it less visible, the bold makes it more visible, kind of cancelling out to produce an overall visual density similar to the surrounding text).

[castedo]

Both look fine to me. Not that it is very important, but just in case you want to spend more time making it closer to perfect, you might want to riff off what Wikipedia does: look at text "document.tex" on the page https://en.wikipedia.org/wiki/LaTeX, for example.

[jeromekelleher]

Vote on Slack?

[benjeffery]

Vote on Slack?

Just created one in #website