Code in exercises is "very low contrast" error in accessibility checker

[brownsarahm]

this might not be the right place, but while doing accessibility checks on an incubator lesson I noticed this.

Is there a different way lesson authors should denote code in exercise blocks? or is this an acceptable low contrast? (the exercise block background is the same color as a code block background)

linking to review issue for future reference

[tobyhodges]

I can confirm that, based on https://coolors.co/contrast-checker/d63384-f8f9f9, this falls short of the 4.5:1 ratio required for the WCAG AA success criterion. The code-formatted text on pure white background meets that ratio exactly (see https://coolors.co/contrast-checker/d63384-ffffff).

Can we adjust the colour for inline code to keep a high contrast on this grey background, e.g. to #A50D5E?

[ErinBecker]

Thanks for this issue @brownsarahm. The @carpentries/workbench-maintainers started to discuss this at our meeting today. Here's what we've tracked down so far:

Kelly and I started by inspecting the code for in-line code within an exercise block. The color for the in-line code appears to come from the _rfs.scss stylesheet (line 294).

This sylesheet appears to be imported from Bootstrap, but line 294 of this style sheet appears to be about resizing safari iframes. We have no idea how this is related to setting text color.

Varnish's styles.css.scss imports codeblocks.scss, which includes a definition of a code element starting on line 46. Line 53 sets the color property for the code element to inherit.

We found a tutorial video about css cascading that seems relevant, but haven't yet been able to track down where the code element is inheriting its color from. We are pretty confident we can override this inhertance by defining code color somewhere, but we don't know where it should be defined.

We'll be checking in with the other Workbench Maintainers next week, who know a lil' more about css (😂) and hopefully figure out where this property needs to be set. This is turning into a great learning opportunity for us to understand how the Workbench uses css.

[tobyhodges]

Note that the issue is with contrast of inline code (i.e. monospaced text within a paragraph of normal text), rather than code in codeblocks. e.g. code {color: #a50d5e;} rather than

code {
    color: #a50d5e;
}

So codeblocks.scss may not be the correct location for making a change like this. Having said that, I am not sure where else to suggest! But it could be an important distinction.

[froggleston]

Hi all. The CSS of the code block declaration in bootstrap is overridden by the syntax-highlighting.scss class in varnish. @ErinBecker is correct that inheritance is in play here, but as the syntax-highlighting.scss inherits from the bootstrap code class, but doesn't specify its own color, then it will inherit the bootstrap color. We can override this by adding a specific color property in the syntax-highlighting.scss class:

[froggleston]

Many thanks for raising this @brownsarahm - @zkamvar and I went through this today, and we agreed that setting the background-color to white for the inline code should increase the contrast. I've implemented a fix and it will be in the upcoming varnish 0.3.2 release.

[zkamvar]

Just a note, Rob created the release 20 minutes ago and it is now live on the R universe: https://carpentries.r-universe.dev/varnish