Background goal
Requesting Team
Mobile Apps
Who is your main point of contact and contact preference?
@scblr for design questions/decisions
@JTannerWMF for product decisions
@LGoto for coordination and updates
What are the details of your request? Include relevant timelines or deadlines
The Android team adopted Mobile Web diff colors and added strike through for something that has been removed and a plus for things that have been added due to our concern of red and green being colors that are not friendly for color blind users. A cross platform user explained the lack of consistency across Android app, Mobile Web, and Desktop is confusing and has high switching cost. The iOS team is starting to work on bringing Watchlist in to their app and anticipates an increase of multiplatform users that raise this issue. Apps are looking to us (DST) to identify the best way to visualize diffs and push for the adoption of those guidelines globally. We have already identified that for accessibility reasons, the guidelines should not exclusively rely on color.
Original request to the mobile apps team is in T315348: Color consistency for diffs on Android vs Desktop.
See also existing task T90948: Identify the best diff style (mobile or desktop) and use it on both mobile and desktop
How does the request fit within the departmental or foundation priorities?
Accessibility and the annual plan goal to support moderators (Watchlist is a tool heavily by moderators and it was a moderated that reported this problem)
Is this request urgent or time sensitive?
Apps will implement using existing mobile web colours and the bold/strikethrough styling for addition/deletion of text respectively until this task is moved forward.
Current colors used for diff on the different platforms and diff modes (Visual Editor vs Wikitext) as at April 2023
| Notes | Light | Dark |
|---|---|---|
| Web desktop (Vector skin) Wikitext view |  | -- |
| Web desktop (Vector skin) VE view |  | -- |
| Web mobile (Minerva skin) Wikitext view |  | -- |
| Web mobile (Minerva skin) VE view |  | -- |
| iOS app |  | -- |
| Android app |  | -- |
Note: There may be pending changes or additions from recent work by CommTech and Moderator Tools as part of Better-Diffs-2023
Considerations
- Colour considerations: Avoid to use Red and Green since they are colors that are not friendly for color blind users .
- Achromatopsia users will perceive colors as gray scales, so we'll need to use different lightness levels. Check the example below:
- Achromatopsia users will perceive colors as gray scales, so we'll need to use different lightness levels. Check the example below:
- Additional text styling to improve accessibility - for example, using strikethrough on deletions as an additional signifier besides colour is advisable.
- Considerations for text styling in different language scripts - for example, certain scripts may not be as legible or render in bold or strikethrough.
- Additional markers for diff changes - in Better-Diffs-2023, there are a number of tasks related to adding symbols and other markers on top of the diff styling to indicate changes - see T324755, T327193, T330247, and T324759.
- "Highlight" text colours in use currently, for example in Visual editor (such as when link text highlighted to show the link editor), Content Translation, and Structured tasks . See T280670: Add a unified text highlight component to Codex Previous discussions
- Talk page of Better Diffs (comments):
- "Overall, I think this wish has made me realise how much clearer diffs can be, and how much we can copy what github does (https://www.matthewsetter.com/better-git-diff-support/) in terms of red/green colours and using two layers of colours. Imagine if you can actually find a comma added to a paragraph, because it's sentence is highlighted + the comma double highlighted!"
- "Good work. I can now tell the difference between adding a newline and completely replacing a paragraph, which was the brief. I would also prefer the highlighting to be much more visible. Backgrounds of #80c0ff for .diff-addedline.diffchange and #ffc080 or even #ffa040 for .diff-deletedline.diffchange would enable us to find that elusive added or removed comma hidden in a twenty-line paragraph. Certes (talk) 18:57, 20 March 2023 (UTC)"
Open questions
Include any open questions here if needed.
Design proposal
Inventory and explorations captured in this Figma file.
Acceptance criteria (or Done)
- Audit of diff representation across different products and platforms (audit found here)
- Work with relevant teams in establishing unified diff styling on Web (Desktop, Mobile) and Apps (iOS, Android) across different Platforms
- Define colors for removals, additions, changes
- Define other styling to reinforce the concept of removals and additions (e.g. Bolding text changes, strikethrough for deletions)
- Determine what diff elements should be defined as system tokens
- Publish on wiki for consultation
- Consult with relevant teams to adopt new diff colors on Web and Apps