Low Contrast

[MatsSvensson]

Great list!

But a lot of the text has too low contrast to be comfortably read on many screens.
(and/or if you are over 40)

"Graying out" text is not a good way to make it distinct from other text.
It should only be used on text you don't want people to read.

[ThaDafinser]

@MatsSvensson i think you need to write that Github itself.
The README markup format/style is set by them.

[MatsSvensson]

I meant the documentation on http://gethead.info/
I don't think GitHub has any control over what styles are used on that site.

Dragging GitHub out from the low-contrast era, is a project that's beyond me.
But others don't have to make the same mistakes.

[brayniverse]

@MatsSvensson are you talking about the code comments? If so they are currently #999, which colour would be more legible to you?

According to WebAIM the current #f5f5f5 and #999 combination fails all tests. The closest I could get to the original combination is #fafafa and #555.

Before

After

[ypxio]

I just try to make some different style of syntax highlight which is on dark mode #152

[jaySolo]

Maybe using a different theme would work, since its GitHub Pages, the theme can be changed to something that has better highlighting.

I'm not certain if a theme can be edited though....i would be good if it was possible.

[MysterAitch]

I'm a little late to this party but having only recently been introduced to your great reference project, my initial reaction to the website is I am in complete agreement that the code blocks are unnecessarily difficult to read. This is to the point that personally I'll not visit the website, and instead just view the rendering within the github repo directly.

Using such a dark background and only slightly lighter text - i.e. poor contrast - seems to be an issue. I would suggest either making the background less dark, else making the text more vibrant. Ultimately, this is a theme issue.

[MysterAitch]

A brief experiment with the colours / adjusting sliders suggests swapping the following could be some quick wins, though I imagine it may be better to find a full theme and/or do it systematically:

• #e06c75 -> #ff7e86 (class nt - tag names)
• #d19a66 -> #ffaf2e (class na - tag attributes)
• #98c379 -> #6aff89 (class s - strings)
• #5c6370 -> #b4bdca (class c - comments) -- probably a little too bright, but at least it is legible!

I'm not entirely sure how github pages works and whether it automatically re-compiles the site (scss) on edit, but I presume that editing the colours within the scss files would then adjust the display of the site.

Before:

After:

[zyriab]

I just found out that the browser extension "Dark Reader" fixes this.

Without:

With:

Also fixes some other problems that my colorblind self had :)

You can find it here