Evaluate color contrast for code input/output cells and syntax highlighting in rendered html

[troyraen]

First thing we need to do is understand what the accessibility standards for color contrast are and compare them to our tutorials site. Generating a report would be a very helpful first step. Then we need to address any deficiencies.

Some loose goals (prior to knowing the actual accessibility standards) are:

• visually distinguish between regular text, code, and output. This may involve altering the background and/or border colors rather than the text itself.
• python syntax highlighting

Check both light and dark modes.

This Lighthouse tool may help.

We are focused on the notebooks listed in #184 but the solution will be side-wide (in the theme) rather than tied to specific notebooks. This issue may need to be upstreamed or we may decide to manually alter some colors ourselves. Either way, we need to understand our requirements first.

[troyraen]

@bsipocz can you take this on?

[bsipocz]

I'm not sure I'm the best person if we end up needing designing/writing our own theme/CSS for these change (there are some option here: https://mystmd.org/guide/website-style).

But I'm happy to push for these features upstream and then opt in a solution that comes from there.

[troyraen]

Thanks, I think the first step is to do a little research to understand what actually needs to be done. Then push for changes upstream. If we get to the point of needing to manually alter colors ourselves then we can reassign.

[troyraen]

The consultants looked at the IRSA website and produced a report that you can download from the TechInit Tasks confluence page: IRSA Website Spot Checks. The section on Theme Colors has info that will be useful for this issue. Copying some of it here:

Adjust the foreground and/or background colors to ensure that a color contrast ratio of
4.5:1 is achieved for normal sized text and 3:1 for medium-bold or large text.

(for field borders) ensure that a color contrast ratio of at least 3:1 is achieved either with the fill or the page background

Recommended tools for evaluating the color contrast:

• Color Contrast Analyzer: Go to https://www.tpgi.com/color-contrast-checker/ and
  download the application.
• WebAIM Contrast Checker: available at https://webaim.org/resources/contrastchecker/.

The goal here is really to prep for the consultants reviewing notebooks (see parent issue). I'm guessing we'll prefer to push color requests upstream and actual changes are unlikely to happen before the review. So I think we should narrow the scope of this issue to:

• evaluate the three notebooks using the recommendations from that report that are relevant. (one notebook might be sufficient)
• identify our problem areas
• write down a plan (eg, to push for certain changes upstream)

Just that would be great and then we can get feedback and ask any questions that we have. After the consultants review we can open new issues for things we decide to spend more time on.

[troyraen]

The consulting firm is already evaluating notebooks, but it would still be good to come up with a plan here so we can run it by them.