Forced Colors/High Contrast issues

Problem/Motivation

During last weeks accessibility walkthrough, @mgifford and @mherchel helped identify several contrast issues and how to test for them in Chrome - regardless of OS! No more Virtualbox/Parallels (for this at least).

Steps to reproduce

In the Chrome developer tools render config, test with just forced colors

Then test with forced colors + light/dark schemes

Here's an example of a problem that surfaces with a dark scheme

Here's an example of a problem that surfaces with a light scheme

Bugs addressed in this issue:
Icons:

1. Advanced filters icon
2. Close icon on applied filter pills
3. List and Grid icons
4. Project usage icon on module page for dark mode
5. Project usage icon in list view for light color scheme
6. Copy icons on instructional modal in light color scheme

Borders:

1. Filter button
2. Applied filter pills
3. List and Grid buttons
4. Categories on module page
5. Categories on module cards
6. Commands in instructional modal

Proposed resolution

• Assess all the forced colors related issues and determine if it's better to address them all here, or turn this issue into a meta and move problems to dedicated issues
• If this doesn't become a meta issue, each find should be added to the issue summary so we don't need to sift through comments to find the contrast bugs that need addressing.
• Look for missing/obscured borders, text icons and other image use essential to understanding the UI.
• Use the forced colors media query for changes that should only be present in forced colors mode
• Check out how the forced color media query is used in Claro and Olivero for ways of addressing the issue