A11y: Windows High Contrast Mode - Home page - gun violence graph

[bacitracin]

Describe the bug

1. When in Windows High Contrast Mode / dark the labels on the gun violence graph are hard to see. Things that are not visible:
   • Title - Annual Shootings in Philadelphia 2015 - 2023
   • The x & y axis labels
   • The "Fatal" and "non-fatal" text labels
   • "Source: Philadelphia Police Department"

Normal

High Contrast Mode

You can fix this either by fixing the contrast of the text against the background, or you can set the background of the image to always be white. If you choose to go the first route (ideal), check out this article on WHCM special keywords (Canvas for background, CanvasText for labels, etc.) https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/

Acceptance Criteria

Open the page in WHCM dark or simulate it using Devtools(see link below)

• [ ] The labels will be visible against the background.

Additional context

• https://www.smashingmagazine.com/2022/06/guide-windows-high-contrast-mode/
• How to simulate WHCM in Chrome Devtools - https://devtoolstips.org/tips/en/emulate-forced-colors/
• https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/

[zheyichn]

The gun crime graph is a static PNG file named graphic-guncrimes.png in the images folder where color preferences cannot be manually applied. Should we create a component for this graph instead?

[bacitracin]

@zheyichn Is there a way to set the background color of the PNG? Or add one to the container that holds it? That could be a quick fix.

Your suggestion of switching it to a component would allow customizability for text zoom and WHCM system color changes, but I'm not sure if it's worth the effort.

[zheyichn]

Hi @bacitracin, may I be assigned this issue?

Since the text is within a PNG image, the first route doesn't work. I will set the backgroud of the image to be white to fix the issue.

One question - by doing this, I will need a few lines of CSS customization. I noticed that all CSS code is currently in one global.css file. Importing such a large stylesheet can slow down the rendering of the page (which is also reflected in lighthouse report). Would it be better to create a components-css folder within components folder to manage component-level styling?

[bacitracin]

@zheyichn Assigned! Thanks for looking into this. And yes, I think it's time to break out our CSS, good suggestion.