Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Normal text has borderline contrast #97

Open
dankegel opened this issue Aug 3, 2018 · 7 comments
Open

Normal text has borderline contrast #97

dankegel opened this issue Aug 3, 2018 · 7 comments

Comments

@dankegel
Copy link

dankegel commented Aug 3, 2018

(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
Copy link
Contributor

kaushalmodi commented Aug 3, 2018

@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
Copy link
Contributor

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

@bep
Copy link
Member

bep commented Aug 3, 2018

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
Copy link
Contributor

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
Copy link

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
Copy link
Author

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
Copy link
Member

jmooring commented Nov 9, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants