Changing link colors to be higher contrast

[Izzy-Snyder]

Increasing Access

This issue addresses link color accessibility, specifically changing the link color so it meets W3CAG guidelines on color contrast requirements for small text.

Feature enhancement details

see #4031 for discussion and context.

General:
In client/styles/abstracts/_variables.scss

• rename #ffa9d9 (currently p5-contrast-pink) to p5-contrast-light-pink
• create a variable called p5-contrast-dark-pink for the color #b20046
• update any prior references to p5-contrast-pink to use p5-contrast-light-pink instead

Dark mode: change all links to p5-contrast-light-pink (#ffa9d9)

Light mode: change all links to p5-contrast-dark-pink (#b20046)

The links could be changed one by one or by creating a link-text-color variable in each theme and making the links reference their theme's color.

PR Criteria:

• Provide screenshots in your PR of the visual changes implemented
• Provide quality assurance steps for how reviewers can ensure your changes are made properly
• use variable names for component colors (eg p5-contrast-light-pink, not the hex code #ffa9d9)

[VikasKSingh05]

Hi @Izzy-Snyder ! I’d like to work on this accessibility issue.

I’ve gone through the requirements around updating the contrast pink variables and applying the correct link colors for light/dark themes to meet WCAG contrast guidelines. I’m also comfortable handling the SCSS variable refactoring and verifying the visual/theme changes.

Please assign if available. Thanks!

[Izzy-Snyder]

Hi @VikasKSingh05, sounds great! I will assign you. Let me know if you have questions or run into problems. Thanks!