@Volker_E for visibility

The visited link color we use is too dark and very hard to distinguish from normal text. I think a brighter version of the same color would be ideal. I use RebeccaPurple in my vector.css on fawiki and find it very distniguishable.

Of note, the color we use right now (which I think is #3A0592 in RGB) is not part of M82 and indeed M82 does not define any colors in purple family. T109915 also fails to properly address this.

The current color translates to 263-97-57 in the HSB scale (Hue-Saturation-Brightness). If we were to use the current color and just make it brighter (by increasing its brightness in HSB), we could use #4D06BF (at 75% brightness) or #5206CC (at 80% brightness).

If we were to take the blue and the red from M82 and overlay them to get a purple, we would get purples in the same family as #C0649D; in that family, the purple that has the same saturation and brightness as the one we currently use is #91045B which is already highly distinguishable even in this level of brightness. But I think that color is too close to our red-link color family and I prefer the brighter versions of our current purple.

You can find the aforementioned colors in https://www.mediawiki.org/wiki/User:Huji/colors and in the image below.

I also used https://www.toptal.com/designers/colorfilter/ to test these colors for various types of color blindness. With Protanopia, our current purple (visited) links look very much link our blue (non-visited) links. The purples I proposed (at 75% or 80% brightness) look very distinguishable , but the purple based on M82 actually does not. For Duetanpia, all three seem to work. For Tritanopia, the original issue (of our current visited links looking too similar to black non-link text) is even more pronounced, and pretty much none of the options I presented are that much better, but the M82-based option is definitely bad because it looks much closer to the red-link colors.

I am no expert in graphic design or color pallets.

PS: I very strongly support changing the color. I really hope this task doesn't end up being ignored.

@Volker_E what other things need to be done here? (Besides making a gerrit patch, which I can do quickly)

@Huji thanks for your investigation and thoughts. I would just like to clarify a few things to make sure we're both approaching this from the same foundation:

• this change would be for Minerva only (not Vector), at least initially
• the current link colors in Minerva are:

link type	color	hex
normal		#3366cc
normal:visited		#5A3696
missing		#dd3333
missing:visited	n/a	n/a

Testing colors

I've also tried a few different options out, which you can view from your phone or desktop computer here: https://en.m.wikipedia.org/wiki/User:AHollender_(WMF)/sandbox#Link_color_tests

name	color	hex	ΔE*	notes	in-context
current minerva		#5A3696	28.9
purple-1		#6B4BA1	31.1	the slightly lighter tone makes this easier to distinguish from black text
purple-bright		#6D39C2	33.9	the brightness makes it easier to distinguish but is perhaps too distracting
purple-OOUI		#623580	27.4	no better than the current purple
rebecca-purple		#663399	30	kind of a midpoint between purple-1 and purple-bright
purple-AA		#A078D9	44.7	to illustrate how light we have to go to get a AA pass
blue-faded		#507CC5	38

*The Delta E measurements included above are a standard measurement of the distance between two colors, in this case between the color of the black text (#222222 / rgb(34,34,34)) and the respective visited link color. The scores range from 0 to 100; the higher the number the greater the distance between the two colors (e.g. two opposite colors would have a measure of 100). There are a number of formulas available to measure this delta. Based on the recommendation in this article I used CIE DE2000. The calculator I used can be found here. Further reading here and here.

@Volker_E @Nirzar thoughts? Any ideas for a more methodical approach here?

Yes, let's start with Minerva, and then move onto Vector. Current colors in Minerva are already slightly more distinguishable than Vector.

can we look at the purples in context. as in on text, the solid blocks of colors make them look very different than on text

@Nirzar you can see colors in context here: https://en.m.wikipedia.org/wiki/User:AHollender_(WMF)/sandbox#Link_color_tests

purple 1 looks good to me

@Nirzar thanks for taking a look. I too think purple 1 is a good choice.

General note: Nirzar pointed out that using the WCAG AA rating was not a good method for evaluating these options (measuring the legibility of foreground colors on a given background is different than measuring the difference between two adjacent colors). I've therefore updated the ratings in the table above to use the Delta E measurements. You can read more about that at the bottom of this comment: T204081#4831911.

In T204081#4855985, @alexhollender wrote:

@Nirzar thanks for taking a look. I too think purple 1 is a good choice.

General note: Nirzar pointed out that using the WCAG AA rating was not a good method for evaluating these options (measuring the legibility of foreground colors on a given background is different than measuring the difference between two adjacent colors). I've therefore updated the ratings in the table above to use the Delta E measurements. You can read more about that at the bottom of this comment: T204081#4831911.

hi @alexhollender - FWIW, the W3C does have a different guideline to AA background contrast rating for evaluating difference between link and other text (See https://www.w3.org/TR/WCAG20-TECHS/G183.html), which is similar to the Delta E method you've used but recommends instead that the two colors should have a contrast 3:1 or higher.
Also, we should ensure whatever color should also pass W3C AA contrast for text on white. Based on this criteria, purple-1 still is closest.

In T204081#4825145, @Huji wrote:

@Volker_E what other things need to be done here? (Besides making a gerrit patch, which I can do quickly)

@Huji have you got what you need to make a Gerrit change? I'm happy to review!

@RHo ah, thank you for the additional context. That was great to read, and good to know everything still checks out.

@alexhollender Appreciate the thorough output here, with 'purple-1' we ensure basic readability with WCAG level AA support and improved distinction to surrounding text. We might assume that affected users also activate the underlining option, which makes links stand out additionally against surrounding text.
In preliminary testing with Vector, 'purple-1' works well there. It's giving the visited link a different, more useful “note of being visited” by lowering contrast than Vector's current visited #0b0080. We use higher contrast in our standard UI elements for guiding focus and emphasizing actions, so the new choice aligns with our elements elsewhere as well.

@alexhollender For completion the logical next step were to define the :active (currently pressed) link color as well…

For completion the logical next step were to define the :active (currently pressed) link color as well…

@Volker_E sounds good. Do you agree it makes sense to have a separate task for that?

@Huji would it be okay for me to assign this task to you? I believe all the details you need are in the description.

In T204081#4863471, @alexhollender wrote:

For completion the logical next step were to define the :active (currently pressed) link color as well…

@Volker_E sounds good. Do you agree it makes sense to have a separate task for that?

Sure. Main reason I mentioned it here is that they are best looked at in context to each other.

In T204081#4863474, @alexhollender wrote:

@Huji would it be okay for me to assign this task to you? I believe all the details you need are in the description.

Yes, and I will submit a patch in the next day or two, per Jdlrobson's recommendation

Change 484152 had a related patch set uploaded (by Huji; owner: Huji):
[mediawiki/skins/MinervaNeue@master] Change the "visited" color for links to increase readability

https://gerrit.wikimedia.org/r/484152

Change 484152 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Change the "visited" color for links to increase readability

https://gerrit.wikimedia.org/r/484152

This should be live on https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain# in about 10 minutes from now.

Look great. Subtle but effective.

Thanks to @Huji I think we're done here. Anything more left to do Alex or can this be resolved?

@Jdlrobson and @alexhollender nothing else to do here. I will, however, make a (possibly futile) effort to ask for a similar change for Vector (legacy skin) shortly and your input there will be appreciated.

@Huji that would be awesome. Please tag me on the task.

@Huji Take note, that we currently are not yet using Accent50 (#36c) for normal links on Vector and the argumentation might therefore need to be adapted.

@Volker_E yes, and the delta E I reported there is compared to the blue link color of Vector. That said, it might be a good idea to update the blue link color there too, for more uniformity.