Reading/Web/Desktop Improvements/Features/Link colors

Tracked in Phabricator
Task T213778

We are planning to amend normal and visited link colors to

ensure that users with visual impairments have as good experience as we can provide and improve setting links apart from running text by slightly increasing contrast,
provide better usability in environments like reading in sunlight and interacting with Wikimedia wikis,
provide consistency of color usage across different web projects

Changes with in the same outcome have already been introduced to a number of other Wikimedia projects, for example Wikipedia Portals, Minerva Neue and the mobile site, iOS and Android apps dating back to 2018, and have since been entirely undisputed.

Release plan

At some point in 2020 or 2021, we will deploy the change to Office Wiki and Test Wiki, and continue to our early adopting wikis in following months. See our main Features page for more details.

Feature description and requirements

	Internal links	Interwiki	Internal links	Interwiki
	Links to unvisited pages		Links to visited pages
Before	Text link text link text text	Text link text link text text	Text link text link text text	Text link text link text text
After	Text link text link text text		Text link text link text text

Normal and visited link colors will be changed, and aligned with the colors used in Wikipedia Portals and mobile site.
Subtle differences between internal, interwiki, and external link colors will be removed.
All other link states (hover—when you move your cursor on them, active—when you click on them, and red links) will remain unchanged.

Design requirements and guidelines

An important milestone of Wikimedia Design team has been the introduction of a color palette that's built around distinct colors. These are providing sufficient color contrast in combinations of background and foreground text. This has been introduced to comply with Web Content Accessibility Guidelines 2.0 and 2.1 at level AA.

One important detail has been missing in the sensible changes over several years to our Wikimedia projects yet. That has been the 3:1 contrast ratio between links and surrounding running text in Vector. The Web Content Accessibility Guidelines 2.1 define this ratio as necessary to achieve level AA compliance. The link colors have been chosen in a volunteer/Wikimedia developers collaboration in Vector many years ago. Since then, the foreground color has changed a few times, and the color palette by Design team was created. The normal and visited link color in Vector remained unchanged as there hasn't been enough capacity to accompany such noticeable change.

In the meantime, we've been able to rollout the consistent and compliant colors to most other Wikimedia projects, including mobile skin Minerva Neue, which nowadays is responsible for majority of readers traffic.

Vector users are also already seeing our new link color, we call it “Accent50” color, #36c in a number of places—it is used to signify interaction elements throughout the user-interface, be it notifications, interaction buttons (f.e. in VisualEditor) or icons.

Constraints and options

We would like to provide logged-in users, who like to use most of our changes, but want to continue with the current color an option to override the new defaults.

You can copy and paste those rules and insert it to your global.css:

/**
 * Use legacy Vector link colors (2013-2019), 
 * instead of Wikimedia Design Style Guide ones.
 * See https://design.wikimedia.org/style-guide/visual-style_colors.html and
 *     https://phabricator.wikimedia.org/T213778
 */
a {
    color: #0645ad;
}

a:visited {
    color: #0b0080;
}