Fix Color Contrast for Accessibility

[Mephistic]

Problem

Setting appropriate color contrasts in our designs is essential for vision-impaired users to successfully navigate our site. There are some areas of MAPLE that do not handle color contrast to industry standards. We should adjust the color palettes of these parts of the site so that they contrast enough to be readable for all users.

TBD - Konstantin, where do we need to adjust this specifically on the existing site (future changes can be handled on the design side)?

Success Criteria

• All site pages pass a color contrast audit (details TBD - we can do this manually for the first pass)
• Enable color contrast auditing on future builds (This is possible through Storybook and Playwright addons - Playwright may be more accessible because we're not as consistent as we should be with Storybook)

Related Links

• Storybook Accessibility Addon Docs: https://storybook.js.org/addons/@storybook/addon-a11y
• Playwright Accessibility Addon Docs: https://playwright.dev/docs/accessibility-testing