Improve color contrast in rendered notebook

[isabela-pf]

Problem and context

Color contrast is the difference in value between two colors; what is enough color contrast has been well discussed by WCAG standards. Some areas of the rendered notebook have come up in tests as low contrast or similar in hue, making them difficult or impossible for participants using their vision to read. This issue will only cover parts of the notebook that are not author-generated, meaning they show up no matter what the author does. We have only tested on light mode, so this issue only describes contrast issues found in light mode.

The areas that have come up as contrast issues in tests include:

• Execution prompts and numbers—the In[#] and Out [#] sections before code cells
• Cell borders/bounding boxes—the light grey surrounding typically code cells
• Error and warning colors—light red and orange backgrounds to output messages (main issue in Improve error/warning cell outputs #58)
• Syntax highlighting (main issue in Syntax highlighting feedback #54)

Possible solutions

While each issue will require it's own specific solution, the overall solution is to increase contrast in these areas. First we will try and preserve the hue of each low contrast color (ie. keep reds red, just a higher contrast red). If there are not good contrast solutions with the hue, we will consider a grayscale option and find other ways to communicate the information.

By issue listed above

• Execution prompts and numbers need to be a darker grey or be on another background color.
• Cell borders/bounding boxes need to be a darker grey. The border is most important to help determine a section. The bounding box fill color may not be adjusted because it could cause further issues with the text and syntax highlighting colors in the cell.
• Error and warning colors need to be darker or not be represented by color. More info in Improve error/warning cell outputs #58.
• Syntax highlighting solutions are listed in Syntax highlighting feedback #54

Acceptance criteria

This issue can be closed when we

• Merge a PR that addresses all of these issues (or all but error and syntax highlighting since they have their own issues to reference).
• Or verify if some of these have been changed since testing.

Tasks to complete

• Find and list current values and contrast ratio for each of these issues.
• Research where these values come from. They may match behavior in editable notebooks. It's important to know what we are changing.
• Provide new color values that pass relevant WCAG contrast guidelines.
• Make PRs to change the contrast