search

gohugoio / gohugoioTheme

A [wip] theme for the gohugo.io home page, docs and theme sites.
MIT License
107 stars 63 forks source link

Normal text has borderline contrast #97

Open dankegel opened 6 years ago

dankegel commented 6 years ago

(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: hugo-contrast (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:

webaim-contrast

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 commented 6 years ago

@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 commented 6 years ago

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

bep commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 1 year ago

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).