Placeholder link style contrast refactor

[Izzy-Snyder]

Increasing Access

This feature would ensure that links without specified styles will by default have high enough contrast with the main background colors of each theme.

Feature enhancement details

Links in the console area of the editor use the placeholder link color, which is inactive-text-color at rest and heavy-text-color on hover.

This makes the links far too low contrast in the light theme (1.9:1 ratio):

Using heavy-text-color at rest would give a 15:1 contrast ratio:

My proposed fix is to change the placeholder link styling to heavy-text-color by default. The link should also have an underline by default that becomes thicker on hover (like the change in #3560 ). The thickness should be 0.1em.

Changing the links in dark and high contrast mode to heavy-text-color would also increase the contrast (though the contrast is ok as is), so this change would not decrease accessibility.

Changes:

• in _placeholders.scss, update the link styling
• change color from inactive-text-color' to heavy-text-color`
• change text-decoration: none to text-decoration: underline for the default link state
• add text-decoration-thickness: 0.1em; to the hover state.

[SableRaf]

Seems like a good problem to fix! Maybe using a color that contrasts more with the running text of the error so it's easier to parse visually? With heavy-text-color it's harder to distinguish from the rest of the text, the way it is in the current version.

[GnanaloshiniA27]

Hi! I'd like to work on this issue. Could you please assign it to me? Thank you!

[Izzy-Snyder]

Just assigned you @GnanaloshiniA27! Thanks for your interest in working on the issue.

And thank you for the feedback @SableRaf on making sure the links stand out - @GnanaloshiniA27 how much experience with CSS/sass do you have? If you feel comfortable doing so, you could pick a different contrasting link color for each theme to use for placeholder links (feel free to reference #4159 for existing high contrast link colors!)

If that feels too complex as a starting point, feel free to start by just changing to heavy text color and adding the underline, and post some screenshots!

[GnanaloshiniA27]

Thank you for assigning me!
I'll do my best