Page MenuHomePhabricator

Define visited link and red link colors for dark mode (black)
Open, Needs TriagePublic

Description

Description

Currently we don't have colors defined for visited links and red links in dark mode (black version).

Designs:


Visited link color #C180BB
Red link color #FF6E6E

Link typeContrast with visited linkContrast with blue linkContrast with red linkContrast with textContrast with paper
Visitedn/a1.061.082.967.07
Red1.081.01n/a2.727.7

Event Timeline

Restricted Application added a project: Community-Tech. · View Herald TranscriptApr 25 2019, 11:59 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

@cmadeo if you have time to work on this that'd be awesome, no worries if not.

Hi @alexhollender, yep! I can work on this this week

Thanks for your help @cmadeo. The color of "redlinks" has an established meaning in the wikis, so my humble suggestion for this element is that the Dark mode color be some (darkish) shade of red.

cmadeo updated the task description. (Show Details)Apr 30 2019, 2:46 PM

@alexhollender updated using the colors used in syntax highlighting on iOS, let me know if you need greater contrast for web, as these were designed to work both with Dark and Black and if you'll only be supporting Black I can probably up the contrast a touch.

Hi all!

Some other potential options for visited link colors are #709bbd (blue-grey used on iOS for syntax highlighting) or #8365B7 (new, darker purple color not used elsewhere).

For comparison:

jmatazzoni added a comment.EditedMay 1 2019, 5:12 PM

@alexhollender, I'm looking at the Dark Mode redlink color as of May 1. I like that it is more recognizably "red" now. Thanks. But when I look at a page with redlinks, they are the thing that stands out most on the page. See screenshot.

So, what is the meaning of the red in redlinks? In my view redlinks are not an element that we particularly need to draw users' attention to; this is not the type of red that means "warning, you need to do something!" The red here is just information (in some sense it actually means "don't click on me"). So it would seem appropriate to me if we could darken this color some—as in my crude mockup below—so that the redlinks are more at the same brightness level as the other links. Can we do that?

redlink color as of May 1Could we try something darker? (crude hack for demo purposes only)
cmadeo added a comment.May 1 2019, 6:04 PM

@jmatazzoni unfortunately a lot of the colors end up needing to be bright when placed on a black background in order to achieve a minimum of AA WCAG compliance. The color you've used int he mock ups above (#BA504F) doesn't have a high enough contrast ratio on true black (#000)

In T221918#5150698, @cmadeo wrote:

@jmatazzoni unfortunately a lot of the colors end up needing to be bright when placed on a black background in order to achieve a minimum of AA WCAG compliance. The color you've used int he mock ups above (#BA504F) doesn't have a high enough contrast ratio on true black (#000)

Ah, that explains it. Thanks. And just desaturating the color takes it back to the pinky/orangy zone. Well then OK, if that is as dark as it can be (is it?) so be it.

cmadeo added a comment.May 1 2019, 7:50 PM

@jmatazzoni technically you could use #D43D33 but this would drop the ratio down to 4.51 and we'd be introducing a new color rather than re-using a color from the apps.

@jmatazzoni technically you could use #D43D33 but this would drop the ratio down to 4.51 and we'd be introducing a new color rather than re-using a color from the apps.

I leave it to you and Alex to figure out the best solution. I've raised a point, about this element needing to be recognizably red but not needing to stand out more than the other colors*. You've responded with a valid concern about accessibility. Now you two will choose the best shade given those parameters.

(*Side observation, not work: red seems to stand out naturally. My own belief is that this is a biological adaptation, because red is the color of blood. "Seeing red" literally triggers the human nervous system—which is why it's so popular in packaging and advertising. There are even statistical studies showing that when teams wear their red uniforms they win more often.)

Adding an input here, the proposed visited color from T213778 by @alexhollender works very well with the inverted & hue-rotated filters.

Using it would slightly lower maintenance burden in the mid-term.