Problem

Diff styling across platforms and ways of viewing them present a wide range of color and graphical means of doing so. This causes an inconsistent user experience, lacks visual unification and proper use of Codex color tokens, while sacrificing on accessibility fronts.

Goals

• Unify colors across all forms of viewing diffs
• Unify graphical means of conveying removed, added, moved, and changed content
• Improve overall visual styles and experiences of viewing diffs

diff view	before	after
Wikitext
Inline
Visual

The above table is only portraying Vector on desktop, but the idea is to unify all platforms to have the same color and graphics scheme.

Principles

• Optimize for various types of accessibility needs
• Understand the history of diff style changes
• Document decision-making

Considerations

With a change to colors in diffs, as this has historically been a highly debated and discussed topic, we should consider doing one of three things:

1. Provide custom CSS code to use the existing colors - This would only work for light mode, or the system setting. This is the least effort option as it does not introduce new preferences or additional tokens to be maintained. This is the most customizable option (for light mode) but requires some technical knowledge.
2. Introduce a toggle for "old diff styling" to opt out of the update in colors - This would not allow a lot of room for growth as it would be a single toggle, and not consider potential future options around a variety of diff colors. This would only change the colors, not the graphical improvements being made.
3. Introduce a choice in color scheme - This could be as small as the color scheme of diffs, and start with either yellow/blue or red/green for all ways of viewing diffs. Or as large as various color themes for the entirety of MediaWiki which focus on various color vision deficiencies. The latter would require a bit more design thinking and would be the most technical work.

Another consideration should be releasing this work to small amounts of users at a time, or potentially to smaller wikis with different cultural contexts.

In the future, we could consider redesigning the Wikitext left/right view with a simplified layout and background colors changes T394352

Acceptance criteria

(individual tasks will cover each item listed here)

• Come to a decision on the best unifying color combinations to move forward
• Consult with volunteer community and implementing product teams on planned changes
• Project page is created to document the plan to make changes T394317: Document planned changes for updated diff styling
• Planned changes are shared in Tech News
• Phase 1 (color - unify colors across all diff types using Codex tokens and implement color theme switcher) changes are made and published T394327: Update color tokens for diff styling in Codex T400751: Implement color updates to diffs on Web T400752: Implement color updates to diffs on iOS T400754: Implement color updates to diffs on Android
• Phase 2 (general graphical improvements - consistent use of legend, breaking up of ways to view diffs, etc., strike though, bold font weight, etc.) changes are made and published T394345: Implement general graphical improvements for diff styling
• Existing feature documentation/screenshots are updated T394354: Update existing feature documentation/screenshots which include reference to diffs