[VISUAL CHANGE] Visited links are not accessible in dark mode
Open, HighPublic1 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	JScherer-WMF
	Mon, Jun 3, 5:56 PM

Description

Overview:
We have slightly changed some of the link colors to improve accessibility. Specifically:

The hover state of links has changed from #36c to #447FF5.
The active state of links has changed from #FAA700 to #2A4B8D
The visited color of links has changed from #795CB2 to #6B4BA1

NOTE: this change also changes hover and active states for links in desktop site standard theme.

Old task description:

Steps to replicate the issue (include links if applicable):

Go to any page in dark mode on Vector.
Click a link
Go back to the source page and inspect the computed colour.

What happens?:

Visited links are #795cb2

Screenshot 2024-06-03 at 11.55.37 AM.png (274×988 px, 56 KB)

What should have happened instead?:
They should be #977DBD

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Weirdly, it looks like the variable is right but this is being overwritten for some reason.

Screenshot 2024-06-03 at 11.47.25 AM.png (312×592 px, 84 KB)

QA Results - Beta

AC	Status	Details
1	✅	T366515#9904658

Details

	Subject	Repo	Branch	Lines +/-
	Use codex link styles in Vector, remove old link color variables	mediawiki/skins/Vector	master	+66 -42

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Open		Jdrewniak	T341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
Open		Jdrewniak	T341632 [EPIC] Palette customizations and dark mode
Open		None	T367150 Deploy dark mode to logged-out users on the Vector2022 skin
Open	BUG REPORT	ovasileva	T366515 [VISUAL CHANGE] Visited links are not accessible in dark mode

Event Timeline

JScherer-WMF created this task.Mon, Jun 3, 5:56 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMon, Jun 3, 5:56 PM

JScherer-WMF triaged this task as High priority.Mon, Jun 3, 5:56 PM

This is true of Minerva, too, it seems T357988.

Izno subscribed.Mon, Jun 3, 7:05 PM

It looks like Vector 2022 defines various link colors inside resources/mediawiki.less/vector-2022/mediawiki.skin.variables.less
https://github.com/wikimedia/mediawiki-skins-Vector/blob/master/resources/mediawiki.less/vector-2022/mediawiki.skin.variables.less#L39

These do not appear to be defined in Codex but are defined in mediawiki.skin.defaults.less
In Vector 2022 we use color-progressive for the link color?
What should we use for visited and active colors? https://doc.wikimedia.org/codex/latest/design-tokens/color.html has no guidance...

In T366515#9857103, @Jdlrobson wrote:

It looks like Vector 2022 defines various link colors inside resources/mediawiki.less/vector-2022/mediawiki.skin.variables.less
https://github.com/wikimedia/mediawiki-skins-Vector/blob/master/resources/mediawiki.less/vector-2022/mediawiki.skin.variables.less#L39

These do not appear to be defined in Codex but are defined in mediawiki.skin.defaults.less
In Vector 2022 we use color-progressive for the link color?
What should we use for visited and active colors? https://doc.wikimedia.org/codex/latest/design-tokens/color.html has no guidance...

Thanks, Jon. This an example of variables that are ready but haven't made it into Codex yet. cc @CCiufo-WMF @DTorsani-WMF

Here are the dark mode link colours:
progressive: #6D8AF2
progressive-hover: #AFB6E9
progressive-active: #C2D1F0
progressive-focus: #3366CC
destructive: #FF4242
destructive-hover: #EF8174
destructive-active: #F8A397
visited: #977DBD
destructive-visited: #B97876
disabled: #72777D

JScherer-WMF mentioned this in T357988: Reference drawer: Visited links have insufficient contrast in Minerva in light theme.Wed, Jun 5, 10:27 PM

JScherer-WMF moved this task from Needs analysis to Ready for estimation on the Web-Team-Backlog (FY2023-24 Q4 Sprint 5) board.Wed, Jun 5, 10:31 PM

Jdlrobson merged a task: T366800: Dark mode: Visited link color doesn't pass contrast requirements .Thu, Jun 6, 2:24 PM

Jdlrobson added a subscriber: Jack_who_built_the_house.

Change #1039774 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Define visited color in dark theme

https://gerrit.wikimedia.org/r/1039774

gerritbot added a project: Patch-For-Review.Thu, Jun 6, 3:33 PM

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q4 Sprint 6); removed Web-Team-Backlog (FY2023-24 Q4 Sprint 5).Mon, Jun 10, 5:46 PM

Jdlrobson moved this task from Needs analysis to Ready for estimation on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Mon, Jun 10, 5:47 PM

@ovasileva this is a blocker for the roll out next week. Can we estimate this and swap it out for the low priority 2 pointer in Ready for dev?

bwang claimed this task.Thu, Jun 13, 4:42 PM

bwang moved this task from Ready for estimation to Code Review on the Web-Team-Backlog (FY2023-24 Q4 Sprint 5) board.

ovasileva set the point value for this task to 1.Thu, Jun 13, 5:15 PM

bwang removed bwang as the assignee of this task.Fri, Jun 14, 6:45 PM

bwang subscribed.

ovasileva edited projects, added Web-Team-Backlog (FY2023-24 Q4 Sprint 6), FY2023-24-WE 2.1 Typography and palette customizations; removed Web-Team-Backlog (FY2023-24 Q4 Sprint 5).Mon, Jun 17, 5:13 PM

ovasileva added parent tasks: T367151: [Config] Deploy dark mode to all users on the Minerva skin , T367150: Deploy dark mode to logged-out users on the Vector2022 skin.

ovasileva moved this task from Ready for estimation to Needs More Work on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.

ovasileva removed a parent task: T367151: [Config] Deploy dark mode to all users on the Minerva skin .

bwang moved this task from Needs More Work to Code Review on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Mon, Jun 17, 8:27 PM

Change #1039774 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Use codex link styles in Vector, remove old link color variables

https://gerrit.wikimedia.org/r/1039774

Maintenance_bot removed a project: Patch-For-Review.Mon, Jun 17, 11:31 PM

Jdlrobson assigned this task to GMikesell-WMF.Mon, Jun 17, 11:48 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.

ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.10; 2024-06-18).Tue, Jun 18, 12:00 AM

Jdlrobson moved this task from Backlog to Night mode (desktop) on the FY2023-24-WE 2.1 Typography and palette customizations board.Tue, Jun 18, 4:00 PM

bwang mentioned this in T367892: Use Codex link styles in Minerva.Tue, Jun 18, 4:15 PM

Test Result - Beta

Status: ✅ PASS
Environment: Beta
OS: macOS Sonoma 14.5
Browser: Chrome 126
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

✅ AC1: background colors should disappear when compared with

Go to any page in dark mode on Vector.
Click a link (ex. https://en.wikipedia.beta.wmflabs.org/wiki/Polar_bear)
Go back to the source page and inspect the computed colour.

2024-06-18_11-25-23.mp4.gif (962×1 px, 2 MB)

GMikesell-WMF removed GMikesell-WMF as the assignee of this task.Tue, Jun 18, 6:40 PM

GMikesell-WMF updated the task description. (Show Details)

GMikesell-WMF moved this task from QA to Ready for Signoff on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.

GMikesell-WMF subscribed.

Please note associated visual changes and please create a user notice "heads up" if you think this merits one.

Jdlrobson mentioned this in T367844: Various buttons on Vector 2022 acquired unexpected link styling when hovered.Tue, Jun 18, 8:08 PM

No need for user notice given change is only for dark mode. Looks good on beta cluster!

ovasileva reopened this task as Open.Thu, Jun 20, 4:35 PM

We have slightly changed some of the link colors to improve accessibility. Specifically:

The hover state of links has changed from #36c to #447FF5.
The active state of links has changed from #FAA700 to #2A4B8D
The visited color of links has changed from #795CB2 to #6B4BA1

Quiddity updated the task description. (Show Details)Thu, Jun 20, 7:54 PM

Please confirm if this is an accurate and suitable draft for Tech News, or if anything needs to be changed or added. (e.g. Are there any links to add to the text, or perhaps an example before/after image for the top of the Description here). It will be frozen for translation in ~24hours:

The colors used for visited-links, hovered-links, and active links, was slightly changed last week to improve their accessibility.

Quiddity moved this task from To Triage to Announce in next Tech/News on the User-notice board.Thu, Jun 20, 8:12 PM

	F54909636: Screenshot 2024-06-03 at 11.47.25 AM.png
	Mon, Jun 3, 5:56 PM

	F54909670: Screenshot 2024-06-03 at 11.55.37 AM.png
	Mon, Jun 3, 5:56 PM

[VISUAL CHANGE] Visited links are not accessible in dark modeOpen, HighPublic1 Estimated Story PointsBUG REPORTActions