Visual accessibility issues in the remix.run/docs site

[JoshuaKGoldberg]

Reproduction

1. Visit https://remix.run/docs/en/main/start/quickstart
2. Run an accessibility audit, such as with Lighthouse or axe Devtools

System Info

n/a

Used Package Manager

npm

Expected Behavior

Pages such as https://remix.run/docs/en/main/start/quickstart shouldn't have any web accessibility issues.

Actual Behavior

Scanning with axe DevTools finds two visual errors:

• Insufficient color contrast: folks with low color perception and/or poor hardware or lighting conditions might not be able to read...
  • ...in dark mode: the #666666 commented-out text (e.g. # install runtime dependencies)
  • ...in light mode: the #30ba2d light green commands (e.g. my-remix-app)
• Links indistinguishable without relying on color: the color contrast between link colors and regular body text similarly isn't enough for some folks to be able to see the difference...
  • ...in dark mode: between the #3992ff link text compared to #a4a4a4 body text
  • ...in light mode: between #1b6ef5 link text compared to #434343 body text

I haven't dug too deeply. There might be more insufficient color contrasts or other issues.

Some quick suggested remediations could be:

• Lightning the comments in dark mode to be more visually distinct
• Darkening the green text in light mode to be more visually distinct
• Adding an underline to link text, the way GitHub recently did for Markdown by default

Note that I'm not an accessibility professional and might have missed some issues. I'd be happy to send in a PR with these fixes or alternatives, but would recommend having a real professional go through a full site audit.