search

cfpb / design-system

CFPB's work-in-progress design system
https://cfpb.github.io/design-system
Creative Commons Zero v1.0 Universal
41 stars 13 forks source link

Accessibility issues with development docs #2050

Closed chosak closed 4 weeks ago

chosak commented 1 month ago

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.

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

image

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 commented 1 month ago

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.

anselmbradford commented 4 weeks ago

This is fixed, see https://github.com/cfpb/design-system/actions/workflows/lighthouse.yml