Code block legibility poor

[vahtras]

This is related to issue #168 on selecting fonts to improve readability for people with dyslexia. But this is a different question so I choose to open it as a separate issue. I am referring to the actual code blocks enclosed in triple tildes, that are rendered with fix font terminal type:

>>> print("Hello")

In the Software Carpentry lessons these blocks are rendered with very poor contrast, with dark grey text on light grey background. I know people with impaired vision for whom these sections would be completely illegible. It is actually not uncommon to find web pages where the design follows this, let us call it fashion, and it is a real problem for some people.

I hope somebody can come up with an intelligent solution for this. The terminal font itself is fine, could be thicker, but it would also help a lot to increase the contrast between text and background.

Regards, Olav

[rgaiacs]

Thanks for the issue. http://wave.webaim.org/report#/https://carpentries.github.io/lesson-example/04-formatting/index.html reports that some elements has contrast ratio of 2.74:1 which is really low.

[TheoAcker12]

After using WAVE to check the contrast ratio for all possible colors in syntax.css, it looks like the following need to be changed:

• Comment
• Comment.Preproc
• Generic.Error
• Generic.Inserted
• Generic.Output
• Name.Attribute
• Name.Entity
• Name.Exception
• Name.Label
• Text.Whitespace
• Literal.String.Escape
• Literal.String.Interpol

Before I make a pull request: What is "Text.Whitespace" used for? My understanding is that whitespace, by definition, does not have a color. Removing Text.Whitespace from syntax.css would be simplest, so please let me know if there is a reason not to.

[maxim-belkin]

Hi @TheoAcker12. I believe these colors are set by the bootstrap (https://getbootstrap.com/). I see that you tested these colors manually: https://wave.webaim.org/report#/https://theoacker12.github.io/accessibility-content-testing/07-content-test/index.html I'm not positive this is the proper way to do the testing though because background color is important too. You can test contrast of specific lesson pages, find "contrast errors" and then fix them. I looked at pages of two lessons I maintain and the only "contrast errors" I could find were all related to the color of comments in the code block (.c1 class).

As for the "text.whitespace" -- I agree with you that it doesn't make sense to set it if it's used properly

[TheoAcker12]

Hi @maxim-belkin,

I tested them with the general code block background color of #f8f8f8. Are there some other background colors I should check, as well?

Other than the comment colors, I'm not sure how often any of these are used by the code highlighter, so I'm definitely not surprised that the comments are the only ones with low contrast in the lessons you maintain.