We can improve the readability of our content in Vector in two ways:
1. 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 running text ([[ https://design.wikimedia.org/style-guide/visual-style_colors.html | Base10 ]] `#202122`). This will make links stand out better from normal text.
| 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**
2. by updating our colors used for links and visited links to ones that are more distinguishable (i.e. further apart) from each other. This will make visited links easier to distinguish from non-visited links. It is unclear if the same tolerance should be used here. The table below compares the current and proposed visited link colors with the proposed link color (`#3366cc`):
| color | status | hex value | ∆E (from `#3366cc`) | contrast ratio (from `#3366cc`)
| :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.
The determination of how close/far apart two colors are can be made by measuring the [[ http://www.colorwiki.com/wiki/Delta_E%3a_The_Color_Difference | Delta E ]] value between the two colors (using [[ http://colormine.org/delta-e-calculator/cie2000 | this tool ]]), and the [[https://webaim.org/articles/contrast/ | contrast radio]] between the two colors (using [[ https://webaim.org/resources/contrastchecker/ | 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 [[ https://design.wikimedia.org/style-guide/visual-style_colors.html | Wikimedia Style Guide ]], so there is a win for consistency as well.
We update the link color to `#36c`
We update the :visited link color to `#6b4ba1`
=== Resources to align
** https://en.wikipedia.org/wiki/Help:Link_color (!)