Accessibility issues with development docs

[chosak]

Describe the bug

2048 seems to have introduced some Lighthouse accessibility failures on two of the design system website pages. See failing GitHub Actions run here.

• https://cfpb.github.io/design-system/development/variables - Background and foreground colors do not have a sufficient contrast ratio.
• https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project - Background and foreground colors do not have a sufficient contrast ratio.

In both cases the problem is with the code markup syntax highlighting, for example:

The foreground color is #99f and the background grey is #f7f8f9 (grey-5), which is a contrast ratio of 2.36:1, which is less than the required 4.5:1 for WCAG 2.0 AA normal text.

To Reproduce Steps to reproduce the behavior:

1. Go to above pages
2. Run Lighthouse Accessibility test in Google Chrome.

@sonnakim for awareness, @anselmbradford who edited these files last

[anselmbradford]

Hmm this is coming from our out-of-the-box syntax highlighting taken from prism.js https://github.com/cfpb/design-system/blob/main/docs/assets/css/code.scss … I'm surprised this hasn't come up before. Maybe we don't use any syntax highlighting elsewhere.