Placeholder link style contrast refactor #4319

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.