Make diffs and change lists text accessible in both day and night modes
Open, MediumPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	JScherer-WMF
	Apr 3 2024, 4:12 PM

Description

User story

As a Wikipedia contributor, I want the text representations of added and removed content to have at least a 4.5:1 contrast ratio on the background in both day and night mode on desktop and mobile.

Requirements

Colours use design tokens added in T362861
Colours appear as in the design spec
Rules for colors must be defined centrally and use design tokens in https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.diff.styles/diff.less and https://github.com/wikimedia/mediawiki/blob/cd9487d0160076aefd055a99d257e6984b8326d0/resources/src/mediawiki.special.changeslist/default.less
All FIXMEs in Minerva relating to custom CSS variables replaced by tokens in Codex are removed

Designs

added	day mode	night mode
byte content	`@color-green-700`	`@color-green-400`
diff background	`@color-blue-300`	`@color-blue-700`
diff border	`@color-blue-300`	`@color-blue-700`

removed	day mode	night mode
byte content	`@color-red-700`	`@color-red-400`
diff background	`@color-yellow-500`	`@color-yellow-700`
diff border	`@color-yellow-500`	`@color-yellow-700`

Figma dev mode link

QA

Check the following pages match the new color scheme in both day and night mode and mobile and desktop (4 test URLs per bullet point):

Details

Subject	Repo	Branch	Lines +/-
Use upstream codex variables for diffs and red links	mediawiki/skins/MinervaNeue	master	+3 -17
Use Codex design tokens in diff.less	mediawiki/core	master	+10 -13
Use standard Codex colors on changelist diffs	mediawiki/core	master	+3 -3
Update Codex from v1.6.1 to v1.7.0	mediawiki/core	master	+604 -376
tokens: Update `content-added` and `content-removed` token values	design/codex	main	+10 -10
Preserve legacy colors for diffs	mediawiki/skins/MonoBook	master	+6 -0

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		ovasileva	T354835 [epic] Release night mode as a beta feature on desktop and mobile
Open		ovasileva	T356434 [Night Mode] All pages and overlays that can be accessed within 2 clicks by a logged in user (AMC disabled) appear in night mode on mobile
In Progress		DTorsani-WMF	T355147 [EPIC] Dark Mode
Resolved	BUG REPORT	Jdlrobson	T358406 [Design needed] Bytes added on history, contribute, watchlist and recent changes have color contrast issues and is inconsistent with colors on diff pages
Stalled		Jdlrobson	T366371 Enable night theme on diff and change list pages
Open		Edtadros	T361717 Make diffs and change lists text accessible in both day and night modes
Resolved		DTorsani-WMF	T362861 Add decision tokens for diff colors into Codex

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

@CCiufo-WMF thanks for asking! I may need some code review from Design-System-Team

@CCiufo-WMF @JScherer-WMF @DTorsani-WMF I'm not seeing design tokens in https://doc.wikimedia.org/codex/latest/design-tokens/color.html that represent the colors. @color-blue-600 for example does not exist there.

I was also expecting something like this - e.g. variables that contain the day and night mode value:

removed	day mode	night mode
byte content @color-bytes-removed-content	`@color-yellow-700` `#a66200`	`@color-yellow-650` `#ad822b`
diff background @background-color-diff-removed	`@color-yellow-650` `#ad822b`	`@color-yellow-700` `#a66200`
diff content @color-diff-removed	`@content` `#202122`	`@content` `#F8F9FA`
diff border @border-color-diff-removed	`@color-yellow-650` `#ad822b`	`@color-yellow-700` `#a66200`

Is the expectation that this is not part of the design system?

This might not be ready for development but need to verify with DST.

The next step here is for Design-System-Team to confirm we are adding new decision tokens to Codex for diff-related colors. Assuming we are, they also need to be added and made available for use in night mode.

CCiufo-WMF added a project: Codex.Apr 16 2024, 6:42 PM

CCiufo-WMF edited projects, added Design-System-Team (DST-Sprint-21 (2024-04-15 to 2024-04-26)); removed Design-System-Team, good first task, patch-welcome.

Thanks for the update @CCiufo-WMF

@ovasileva I'm going to move this to next sprint board then as it doesn't look like we're ready to work on this yet!

Jdlrobson added a project: Wikimedia-Hackathon-2024.Apr 17 2024, 3:56 PM

Jdlrobson moved this task from Backlog to Night mode (mobile) on the FY2023-24-WE 2.1 Typography and palette customizations board.

Jdlrobson moved this task from Backlog to Hacking project: Dark mode on the Wikimedia-Hackathon-2024 board.Apr 17 2024, 4:03 PM

There's agreement amongst the Design-System-Team designers that these should be tokens that come from Codex. Assigning back to @DTorsani-WMF to finalize on the token names.

DTorsani-WMF reassigned this task from DTorsani-WMF to Jdlrobson.Apr 18 2024, 2:15 PM

DTorsani-WMF added a subtask: T362861: Add decision tokens for diff colors into Codex.

I've created this task to add the decision tokens for diff colors into Codex, which I will work on. I've added that task as a subtask of this task, since once that is done then this task can be completed. Thus, I have assigned this task to @Jdlrobson

Jdlrobson edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (FY2023-24 Q4 Sprint 2).Apr 23 2024, 5:25 PM

egardner moved this task from Committed to Code Review on the Design-System-Team (DST-Sprint-21 (2024-04-15 to 2024-04-26)) board.Apr 23 2024, 8:55 PM

egardner moved this task from Code Review to Pending Release on the Design-System-Team (DST-Sprint-21 (2024-04-15 to 2024-04-26)) board.Apr 23 2024, 9:13 PM

egardner moved this task from Pending Release to Committed on the Design-System-Team (DST-Sprint-21 (2024-04-15 to 2024-04-26)) board.

Jdlrobson moved this task from Incoming to FY2023-24 Q4 Sprint 3 on the Web-Team-Backlog board.Apr 25 2024, 5:20 PM

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q4 Sprint 3); removed Web-Team-Backlog.

Jdlrobson moved this task from Backlog to Ready for Development on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.Apr 25 2024, 5:37 PM

CCiufo-WMF edited projects, added Design-System-Team; removed Design-System-Team (DST-Sprint-21 (2024-04-15 to 2024-04-26)).Apr 29 2024, 4:30 PM

Jdlrobson updated the task description. (Show Details)Apr 29 2024, 9:10 PM

lwatson closed subtask T362861: Add decision tokens for diff colors into Codex as Resolved.May 1 2024, 12:47 PM

Jdlrobson changed the task status from Stalled to Open.May 1 2024, 1:10 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson removed Jdlrobson as the assignee of this task.May 10 2024, 8:09 AM

Jdrewniak claimed this task.Tue, May 14, 3:53 PM

Jdrewniak moved this task from Ready for Development to Doing on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.

Change #1031504 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/core@master] Use Codex design tokens in diff.less

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

gerritbot added a project: Patch-For-Review.Tue, May 14, 4:14 PM

@egardner @DTorsani-WMF the above change also changes colors in the light theme - is this intentional? If so I can imagine it might disrupt editors so will need to be communicated beforehand.

Jdlrobson moved this task from Doing to Blocked on Others on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.Tue, May 14, 4:23 PM

Change #1031511 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/core@master] Use standard Codex colors on changelist diffs

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

I'll also note that if these tokens @color-content-added and @color-content-removed are used on pages with changelists, the bytes added/removed text becomes the same color as links. Is this the correct usage of these tokens?


before	after

Change #1031609 had a related patch set uploaded (by Dtorsani; author: Dtorsani):

[design/codex@main] tokens: Updating content-added and -removed token values

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

DST is proposing changes to both light and dark diff color tokens, but it sounds like we need to discuss this a little more before these patches go forward. Let's chat more about this next week and then we can pick this task back up.

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

[mediawiki/skins/MonoBook@master] Preserve legacy colors for diffs

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

Jdlrobson mentioned this in T365329: [GOAL] Make History page show in dark mode.Mon, May 20, 3:45 PM

Jdlrobson added a parent task: T365329: [GOAL] Make History page show in dark mode.

ovasileva edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (FY2023-24 Q4 Sprint 3).Mon, May 20, 5:26 PM

Jdlrobson moved this task from Night mode (mobile) to Excluded experiences on the FY2023-24-WE 2.1 Typography and palette customizations board.Tue, May 21, 5:34 PM

An update from the design side: Justin and I met today and discussed our next steps, which are to gather design feedback on potential paths forward. We will be gathering internal feedback first on decisions around the similarities and differences between diffs and bytes, how that influences highlight and text colors between the two, and what values of colors we should be using. Will circle back.

Jdlrobson moved this task from Incoming to Groomed on the Web-Team-Backlog board.Thu, May 23, 12:57 AM

Change #1032069 abandoned by Jdlrobson:

[mediawiki/skins/MonoBook@master] Preserve legacy colors for diffs

Reason:

We are still talking through implementation approach here.

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

Update, summarizing design feedback and potential next steps:

Phase 1

A first step should probably be leave things as close to as-is but using Codex tokens for both light and dark modes.
- This would mean using blue/yellow for backgrounds and borders, and green/red for text.
- My question for @Jdlrobson or @Jdrewniak would be then, what happens to all the instances shown in T333681 which are a green/red background? Would they be updated to the blue/yellow with the use of the tokens, or be a separate change?
Either way, we should notify the community about this update before it would get released, to see if there are any strong concerns.

Here is a basic example of this treatment.

New	Current

Phase 2 (this would be done as a part of a new task)

Conduct community conversations around the topic of unifying diff/byte colors and making them more accessible.
Explore alternative options to improve diff/byte UI, like:
- Consider using symbols like '+' and '-' more.
- Consider using the background highlight more.
- Consider using strikethrough for removed content.

cc @egardner @CCiufo-WMF

what happens to all the instances shown in T333681 which are a green/red background?

The plan sounds good to me - would the colors be defined in Codex or would you expect us to override them in Wikimedia skins (I'd prefer the former if possible)

I think there would be less resistance to switching the green and red to blue and yellow as it would be more logical to explain e.g. "We are changing the red and green colors to be consistent with diffs".
We can notify the communities as part of the change for sure.

Okay, great. Yes, the idea is that these values would live in Codex and be a part of the token library. Curious if @egardner or @CCiufo-WMF have any thoughts or concerns about the proposed idea above. If everyone agrees here, I can update this patch with these values.

@DTorsani-WMF I think the revised approach is good. Let's not unnecessarily add scope to this right now, the focus is on getting things to work for dark mode. We should track what you've described as 'Phase 2' in T333681.

Is there a ticket tracking updating the Codex values token? I assume this ticket is stalled until we have those, after which we can reapply Jan's patches (https://gerrit.wikimedia.org/r/c/1031504 and https://gerrit.wikimedia.org/r/c/1031511)

Agreed, I think we need an updated version of T362861

DTorsani-WMF mentioned this in T366280: Establish improved diff/byte visual styles.Thu, May 30, 1:29 PM

Thanks for chiming in. I've updated this patch with this revised approach, to use Codex tokens but match [as closely as possible] the existing colors for both backgrounds/borders and text individually. I will work on getting someone on DST to review this patch and get it merged in in preparation for the next Codex release.

Additionally, T366280 is a new task for future exploration of improving diffs/bytes altogether.

JScherer-WMF awarded a token.Thu, May 30, 3:54 PM

Change #1031609 merged by jenkins-bot:

[design/codex@main] tokens: Update `content-added` and `content-removed` token values

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

Jdlrobson mentioned this in T363780: [QA] Exploratory testing: Vector 2022 night theme.Fri, May 31, 3:27 PM

Jdlrobson mentioned this in T366371: Enable night theme on diff and change list pages.Fri, May 31, 4:56 PM

Jdlrobson added a parent task: T366371: Enable night theme on diff and change list pages.Mon, Jun 3, 7:14 PM

Jdlrobson moved this task from Excluded experiences to General on the FY2023-24-WE 2.1 Typography and palette customizations board.

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q4 Sprint 6); removed Web-Team-Backlog.Thu, Jun 6, 8:54 PM

Jdlrobson moved this task from Needs analysis to Ready for Development on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.

ovasileva removed a parent task: T365329: [GOAL] Make History page show in dark mode.Tue, Jun 11, 9:44 AM

Change #1041776 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v1.6.1 to v1.7.0

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

Change #1041776 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.6.1 to v1.7.0

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

No longer stalled. Patches are ready to go now if we have the capacity to push this through QA.

@DTorsani-WMF could you please confirm that the expectation is that the following changes will occur in the light theme?
On change list pages e.g. https://en.wikipedia.beta.wmflabs.org/w/index.php?title=T352930&action=history

the color changed from #006400 to #096450 for added text.
the color changed from #8b0000 to #b32424 for removed text.

On diff pages:

The diff added background color changes from #d8ecff to #afb6e9
The diff removed background color changes from #feeec8 to #fc3

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

Confirmed!

To add a bit more explanation, the original colors are not colors available in Codex. So to assign these as tokens, we need to use the closest existing color while considering how the two new colors compare to one another.

The color for added text changes from the dark green to green700.
The color for removed text changes from the dark red to red700.
These are relatively subtle changes.

The color for diff added background changes from the light blue to a slightly darker blue, blue300.
The color for diff removed background changes from the light yellow to a slightly darker but also brighter yellow, yellow500.
Although the closest colors to the originals for this application would be the 100 values of each color, this would make these even lighter, further decreasing the contrast and there the accessibility. Instead we move the opposite direction to a darker value. As seen in the Codex option tokens color file, the next value from yellow100 is yellow500. Although the blue spectrum has a blue250 value, in order to be more visually balanced with the diff removed background color of yellow500, we use blue300 instead to address the goal mentioned above:

we need to use the closest existing color while considering how the two new colors compare to one another.

A broader expansion of the color palette is being worked on in T360494 which will provide more values and colors to choose from when we can address a potential revision to how we handle diffs in general as a part of T333681.

DTorsani-WMF reassigned this task from DTorsani-WMF to Jdrewniak.Wed, Jun 12, 12:52 AM

Jdlrobson claimed this task.Wed, Jun 12, 12:52 AM

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

Jdlrobson mentioned this in T366295: Error: Call to a member function getFullURL() on null.

Jdlrobson updated the task description. (Show Details)

Jdlrobson moved this task from Ready for Development to Doing on the Web-Team-Backlog (FY2023-24 Q4 Sprint 5) board.

Jdlrobson reassigned this task from Jdlrobson to Edtadros.Wed, Jun 12, 1:15 AM

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

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

[mediawiki/skins/MinervaNeue@master] Use upstream codex variables for diffs and red links

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

DTorsani-WMF updated the task description. (Show Details)Wed, Jun 12, 1:23 AM

Change #1031504 merged by jenkins-bot: