Proposal
Improve default user-experience* in Vector
- by updating colors used for links and visited links to ones that are more distinguishable (higher in contrast) from running text color. This will make links stand out better from normal text.
- by updating colors used for links and visited links to ones that are more distinguishable from each other. This will make visited links easier to distinguish from non-visited links.
Current | Proposed |
---|---|
Detailed description
- Update links and visited links colors to better distinguish from the color we use for running text (Base10 #202122).
color | status | hex value | ∆E (from #202122) | contrast ratio (from #202122) |
link | current | #0645ad | 29.77 | 1.89 |
link | proposed | #36c | 31.26 | 3 |
:visited link | current | #0b0080 | 28.73 | 1.01 |
:visited link | proposed | #6b4ba1 | 31.14 | 2.41 |
- Update links and visited links colors to make them more distinguishable from each other. The table below compares the current and proposed visited link colors with the proposed link color (#36c):
color | status | hex value | ∆E (from #36c) | contrast ratio (from #36c) |
:visited link | current | #0b0080 | 28.37 | 2.95 |
:visited link | proposed | #6b4ba1 | 20.21 | 1.24 |
Note: the results in the table above are confusing when you compare them with the before/after demonstration image in the Proposal section below. Visually it appears that the proposed colors are more distinguishable from each other, but the Delta E and contrast values are lower.
(*) Identifiability of links for users in alignment with Web Content Accessibility Guidelines 2.1 level AA contrast ratio requirements.
The determination of how close/far apart two colors are can be made by measuring the Delta E value between the two colors (using this tool), and the contrast radio between the two colors (using this tool). 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 Design Style Guide, so there is a win for consistency as well.
Proposed Final state
link type: | local | interwiki | external | local:visted | interwiki:visited | external:visited | local:active | non-local:active | new | new:visited |
current: | #0645ad | #3366bb | #3366bb | #0b0080 | #663366 | #663366 | #faa700 | #bb6633 | #ba0000 | #a55858 |
proposal: | #3366cc | #3366cc | #3366cc | #6b4ba1 | #6b4ba1 | #6b4ba1 | #faa700 | #bb6633 | #ba0000 | #a55858 |
Acceptance criteria
- Update the link color to #36c
- Update the :visited link color to #6b4ba1