Page MenuHomePhabricator

Update link colors on iOS for improved UX and consistency
Open, MediumPublic

Description

Why are we doing this?

Currently we do not support a visited link color on iOS, so this is a proposal to add a visited link color to the app and to use the color scheme defined by web.

Proposed colors

ThemeLink typeHEX valueContrast ratio against PaperWCAG compliance level
DefaultBlue link#3366cc5.37AA
DefaultVisited link#6b4ba16.67AA
BlackBlue link#6699FF7.57AAA
BlackVisited link#c180bb7.07AAA
DarkBlue link#6699FF4.84AA
DarkVisited link#c180bb3.52AA
SepiaBlue link#3366cc5AA
SepiaVisited link#6b4ba16.21AA

Demonstration


Copy of ticket from Web

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

cmadeo created this task.Apr 24 2019, 2:23 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 24 2019, 2:23 PM
LGoto triaged this task as Medium priority.Apr 29 2019, 6:40 PM
cmadeo updated the task description. (Show Details)Apr 30 2019, 2:28 PM

@alexhollender I added a visited link color for Dark + Black themes to this ticket (Sepia will utilize the same color as Default).
This purple (#c180bb) is already used in the app for syntax highlighting, so if possible I'd like to utilize this color again here.