Normal text has borderline contrast

[dankegel]

(From https://discourse.gohugo.io/t/hugo-documentation-webpage-contrast-too-low-getting-eyestrain/13255/9 )

Contrast in normal text, e.g. the words "To verify your new install" in the page http://gohugo.io/getting-started/quick-start/ is relatively low: (it looks a little worse in real life than in this screenshot, not sure why.)

Using Chrome's dev tool shows the foreground color is # 555 and the background color is # fffffe. That's a contrast ratio of 6.43, which should be AA compliant:

So why isn't Hugo's text comfortably readable to me with those colors? My eyes are not great, but I don't need any assistive devices. Whatever the reason, readability is borderline for me.

Changing # 555 to # 444 resulted in subjectively sufficient contrast for normal text. It was not sufficient for the text 'hugo version' immediately below, which has a different font and a different background color; for that, # 333 was sufficient.

I've never understood the low contrast esthetic, and assure you some users will be very grateful for a dollop more contrast. Please consider it.

[kaushalmodi]

@bep I'd propose setting the code block backgrounds to white (or rather the body tag default) and using the github Chroma theme (you can see a sample at the end of this post).

[onedrawingperday]

I also agree that the contrast in the code blocks should be increased.

[bep]

I have now set code blocks to have white background + set the theme to GitHub. The inline code styles looks a little funky, so may revisit that. Setting the body background to white is a little bit too dramatic a change. I tested it and it just looks ... odd.

[kaushalmodi]

Setting the body background to white is a little bit too dramatic

Sorry, I didn't mean that. I first suggested setting the code block bg to white assuming that the body bg is white. In attempt to clarify (which I did not), I added "or rather the body tag default".

Summary: Set the code block bg to the body bg (default in CSS).

[TotallyInformation]

I've been on hols so sorry for the late response here. I agree that the contrast is too low and we should really be aiming for AAA compliance rather than AA.

However, I also agree that a pure white background for code isn't brilliant. Possibly black text on light grey background would do the job?

[dankegel]

I'd settle for just changing # 555 to # 333, it won't really change the look, just make it more legible. But then I don't understand the theme.

[jmooring]

Current status...

Desc	Contrast Ratio	WCAG Pass
Body	7.08	AAA
Code blocks	6.37	AA
Note shortcode	6.31	AA

Changing body color from #555555 to #4e4e4e provides minimum contrast ratio of 7.0 (WCAG AAA).