Editor-wide link color change

[Izzy-Snyder]

Increasing Access

Currently, small text hyperlinks don't have enough contrast in the editor in light or dark mode. The contrast is below the WCAG guidelines minimum ratio of 4.5:1.

Feature enhancement details

Proposal

I'm proposing to change the link color in the editor (p5js pink) in light/dark mode to meet contrast guidelines. One way of approaching this is to change the themes to match the p5js.org website, which does meet contrast guidelines for links. I would appreciate input on this as it somewhat affects the use of the main brand color (p5-pink) across the whole editor.

Background

The p5js.org website uses the colors --type-magenta #eb285f (which looks very similar to p5 pink #ed225d) in dark mode against a completely black background. and --type-magenta-dark #b20046 in light mode against a completely white background.

Color options to meet contrast guidelines

Light theme
--type-magenta-dark has a contrast ratio of 6.8:1 with the main background of the light palette (lighter: #fbfbfb), 6.2:1 with the console/modal background color (light: #f0f0f0), and 7:1 with other various backgrounds that are lightest (#ffffff). So it works on all the backgrounds as far as I can tell!

Dark theme
--type-magenta has under 4.5:1 contrast against darker (#1c1c1c) and dark (333333) which are the main background colors in the dark theme.

This could be addressed in a few ways:

1. changing all the backgrounds that have links on them to darkest (#000) and link text to #eb285f
2. use an existing color in the palette for links such as middle-light (#a6a6a6), medium-light (#d9d9d9), or contrast-pink (#ffa9d9) - all these have well over 4.5:1 contrast with dark (333333) and darker (#1c1c1c) which are the main background colors.
3. add another color that looks similar to p5 pink but has sufficient contrast, like #FF6691 and use that for links on the existing backgrounds.

Contrast theme
Links are yellow which is high contrast already!

Other suggestions

All regular links should be underlined by default (so they're not indicated by color alone). They can also have the underline get thicker on hover like the fix used in this PR.

I would also suggest adding a variable to each theme for link text color.

Currently link color is set at the link level for each sass module, and it doesn't refer back to a variable for link color. This means that changing the link color is pretty tedious. Having one variable per theme to change would make that a lot more straightforward for future contributors.

Currently, links are styled by default with the placeholder link class, which uses inactive-text-color, and that gets overridden on actual links in each module. It seems like there should be different classes for actual links and links on buttons/menus, so that those can have consistent styling, but I'm not the most knowledgeable about CSS.

[nbogie]

Hi! I posted a few screenshots on discord thread of the proposed colour changes for links in dark mode.

[Izzy-Snyder]

Thank you @nbogie! I'm going to copy those over here so they're on this thread as well:

option 1: changing all the backgrounds that have links on them to darkest (#000) and link text to #eb285f

use an existing color in the palette for links

middle-light (#a6a6a6)

medium-light (#d9d9d9)

contrast-pink (#ffa9d9)

add another color that looks similar to p5 pink but has sufficient contrast, like #FF6691 and use that for links on the existing backgrounds.

[Izzy-Snyder]

And here is a script @nbogie wrote to automate this process!
https://gist.github.com/nbogie/925a63749b2ec9c79156e1bdc2f5bb26

[Izzy-Snyder]

I think maintaining the link colors but changing the background perhaps looks the most legible, but would love more feedback! I know this would be a significant design change. I also am noticing there are some lighter background colors, so if anyone is able to check contrast in the screenshots here that would be great. Some of these options could be the link color just when the user hovers over them as well.