Page MenuHomePhabricator

Color of visited links is difficult to distinguish from plain black text in MinervaNeue skin
Closed, ResolvedPublic

Description

The visited link color in Minerva (#5a3696) is quite close to the color of black text (#222). The distance between the two colors is (described as a Delta E value) is 28.9. Compare this with the ΔE between the blue link color (#36c) and black text: 41. While we don't currently have UI guidelines for what constitutes an acceptable ΔE between two text colors, we might assume the ΔE between our blue link color and our black text color to be somewhat of a baseline (41), and then conclude that a 12.3% drop in ΔE is problematic.

Steps to view issue

  1. visit https://en.m.wikipedia.org/wiki/Dissection#History on desktop or phone
  2. scroll to the India sub-section, and click on the "Arthashastra" link in the second paragraph
  3. click back and check out how "Arthashastra" (now rendered in the visited link color) blends into the black text around it. When scanning the page it does not stand out from the other text as a link.
can you spot the visited link?

Proposal

We update the color of visited links. Based on the feedback below we use Purple-1, #6b4ba1.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 11 2018, 8:06 PM
alexhollender added a subscriber: Volker_E.

@Volker_E for visibility

Restricted Application added a project: UI-Standardization. · View Herald TranscriptSep 11 2018, 10:55 PM
Huji added a subscriber: Huji.EditedDec 13 2018, 12:51 AM

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.

Huji added a comment.Dec 15 2018, 12:13 AM

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

alexhollender added a subscriber: Nirzar.EditedDec 18 2018, 5:14 PM

@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 typecolorhex
normal
#3366cc
normal:visited
#5A3696
missing
#dd3333
missing:visitedn/an/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

namecolorhexΔE*notesin-context
current minerva
#5A369628.9
purple-1
#6B4BA131.1the slightly lighter tone makes this easier to distinguish from black text
purple-bright
#6D39C233.9the brightness makes it easier to distinguish but is perhaps too distracting
purple-OOUI
#62358027.4no better than the current purple
rebecca-purple
#66339930kind of a midpoint between purple-1 and purple-bright
purple-AA
#A078D944.7to illustrate how light we have to go to get a AA pass
blue-faded
#507CC538

*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?

Feldo moved this task from Unsorted to Colors on the Accessibility board.Dec 19 2018, 1:15 PM
Huji added a comment.Dec 27 2018, 3:11 AM

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

Nirzar added a comment.Jan 4 2019, 5:56 PM

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 added a comment.Jan 4 2019, 6:13 PM

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.

alexhollender triaged this task as Normal priority.Jan 4 2019, 8:33 PM
alexhollender updated the task description. (Show Details)
alexhollender moved this task from To Triage to Triaged but Future on the Readers-Web-Backlog board.
RHo added a subscriber: RHo.Jan 7 2019, 12:14 PM

@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.

namehexΔE*Contrast ratio with #222 textPasses AA against #FFF?
current minerva#5A369628.91.82:1Yes
purple-1#6B4BA131.12.38:1Yes
purple-bright#6D39C233.92.28:1Yes
purple-OOUI#6D39C227.41.77:1Yes
rebecca-purple#663399301.89:1Yes
purple-AA#A078D944.71.89:1No
blue-faded#507CC5383.81No

@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.

Volker_E updated the task description. (Show Details)Jan 8 2019, 5:35 PM
Volker_E updated the task description. (Show Details)

@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.

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.

Huji added a comment.Jan 8 2019, 7:16 PM

@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

alexhollender assigned this task to Huji.Jan 8 2019, 9:43 PM

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

Huji renamed this task from Color of visited links is difficult to distinguish from plain black text to Color of visited links is difficult to distinguish from plain black text in MinervaNeue skin.Jan 14 2019, 12:46 AM

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?

alexhollender closed this task as Resolved.Jan 14 2019, 9:42 PM

All set. Thanks @Huji!

Huji added a comment.Jan 15 2019, 12:55 AM

@Jdlrobson and @alexhollender nothing else to do here. I will, however, make a (possibly futile) effort to ask for a similar change for Vector 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.

Huji added a comment.Jan 15 2019, 2:54 PM

@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.