Repository navigation
Placeholder link style contrast refactor #4319
Description
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' toheavy-text-color` - change
text-decoration: nonetotext-decoration: underlinefor the default link state - add
text-decoration-thickness: 0.1em;to the hover state.
Activity
SableRaf commentedon Sep 22, 2026
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-colorit's harder to distinguish from the rest of the text, the way it is in the current version.GnanaloshiniA27 commentedon Sep 22, 2026
Hi! I'd like to work on this issue. Could you please assign it to me? Thank you!
Izzy-Snyder commentedon Sep 22, 2026
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 commentedon Sep 25, 2026
Thank you for assigning me!
I'll do my best
aarjav-shukla commentedon Oct 4, 2026
@Izzy-Snyder is this issue being worked upon by someone else ? if not then i would love to work on this issue thankss !!
aarjav-shukla commentedon Oct 15, 2026
@GnanaloshiniA27 let us know if u r still working on this issue
Izzy-Snyder commentedon Oct 16, 2026
@GnanaloshiniA27 Yes let us know - if I don't hear back within the next week or so (totally fine to say you're still working on it!) I will assign it to @aarjav-shukla
Thanks for both being willing to contribute to the p5 editor :)
aarjav-shukla commentedon Oct 16, 2026
thankss @Izzy-Snyder !!
aarjav-shukla commentedon Oct 22, 2026
@Izzy-Snyder its been a week ? now can i start working on it?
Izzy-Snyder commentedon Oct 24, 2026
@aarjav-shukla go for it, I will re-assign the issue!
aarjav-shukla commentedon Oct 24, 2026
@Izzy-Snyder thankss !! starting the work