Page MenuHomePhabricator

Update link colors in Vector for improved UX (and consistency)
Open, LowestPublic

Description

Description

We can improve the readability of our content in Vector by updating our colors used for links and visited links to ones that are more distinguishable (i.e. further apart) from the color we use for black text (#222222). The determination of how close/far apart two colors are can be made by measuring the Delta E value between the two colors, and the contrast radio between the two colors. The table below suggests two colors that perform better than our current colors. These colors are also currently being used in Minerva (see T204081), and are part of the Wikimedia Style Guide, so there is a win for consistency as well.

colorstatushex value∆Econtrast ratio
linkcurrent#0645ad29.771.87
linkproposed#3366cc35.472.96
:visited linkcurrent#0b008028.731.00
:visited linkproposed#6b4ba131.142.38

Proposal

We update the link color to #3366cc
We update the :visited link color to #6b4ba1

Demonstration:

Resources to align

Event Timeline

Huji created this task.Jan 15 2019, 1:02 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 15 2019, 1:02 AM
Huji updated the task description. (Show Details)Jan 15 2019, 1:02 AM
Huji added a comment.Jan 15 2019, 2:55 PM

Per @Volker_E I also want to suggest that we change the blue link color in Vector to Accent50 (#36c) so it matches that in Minerva.

alexhollender renamed this task from Change the visited link color in Vector to match that in MinervaNeue to Update link colors in Vector for consistency and improved UX.Jan 15 2019, 5:52 PM
alexhollender updated the task description. (Show Details)

@Huji I made this task more general and created two sub tasks for the proposed changes

alexhollender renamed this task from Update link colors in Vector for consistency and improved UX to Update link colors in Vector for improved UX (and consistency).Jan 16 2019, 11:37 PM
Huji updated the task description. (Show Details)Jan 17 2019, 1:20 AM
Huji updated the task description. (Show Details)Jan 17 2019, 1:29 AM
stjn added a subscriber: stjn.EditedJan 29 2019, 2:05 PM

#3366cc is a poorly chosen colour for links. While you’re upping contrast level to almost 3:1 with normal text, like WCAG 2.0 tells us, you’re decreasing it almost in two times for the background (while not against AA level, making it against AAA level). What that really tells us is not that we need to have less visible link colour, but we should’ve not used #222 as main text colour because of purely stylistic choices (and fix contrast of the links in regards to pure black text instead of dark grey).

You can use this for debugging it:
https://contrast-checker.glitch.me

@stjn can you clarify what you mean here:

While you’re upping contrast level to almost 3:1 with normal text, like WCAG 2.0 tells us, you’re decreasing it almost in two times for the background (while not against AA level, making it against AAA level)

I'm not sure I understand

stjn added a comment.EditedJan 29 2019, 5:35 PM

#3366cc is almost two times lighter against background compared to #0645ad and doesn’t pass WCAG 2.0 AAA level for text.

I see. To clarify:
#0645AD has a contrast ratio of 8.53:1 against #FFFFFF (passes WCAG AA, AAA)
#3366cc has a contrast ratio of 5.37:1 against #FFFFFF (passes WCAG AA, fails AAA)

I think it makes sense to balance these measurements with the measurements in the task description, regarding how distinguishable these colors are against black text. When considering only how they perform against a white background, I see your point about #0645AD. However when considering both measurements it seems like #3366cc is a better choice.

stjn added a comment.EditedJan 29 2019, 9:26 PM

Yeah, I get that, that’s why I’m saying that reverting back to black and seeking accessible colours next to pure black is better than having pale link colours that still barely come around WCAG 2.0 AA level requirement (3:1, see https://webaim.org/blog/wcag-2-0-and-link-colors/) because of using dark grey.

Volker_E updated the task description. (Show Details)Mar 7 2019, 3:45 AM

I was asked whether T219707, which I created, should be merged here. My reply was that the two tickets are "Related, but not the same".

I am unclear as to why they have been merged nonetheless.

Solving T213778 will not solve T219707.

@Pigsonthewing can you clarify what you mean here?

Solving T213778 will not solve T219707.

Volker_E triaged this task as Lowest priority.May 14 2019, 5:17 PM

@Pigsonthewing can you clarify what you mean here?

Solving T213778 will not solve T219707.

T213778 proposes "updating our colors used for links and visited links to ones that are more distinguishable (i.e. further apart) from the color we use for black text". It says nothing about making colours used for links and visited links more distinguishable from each other, which is the point of T219707.

@Pigsonthewing thank you for the clarification. Not sure why that task got closed. I think you could either edit the description of this task by adding a section about the contrast between links and visited links, or re-open that task.