=== 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.
**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
| Web desktop (Vector skin) - Wikitext view {F36946185} | Web desktop (Vector skin) - VE view {F36946189} | Web mobile (Minerva skin) - Wikitext view {F36946187} | Web mobile (Minerva skin) - VE view {F36946191} | iOS app {F36942266} | Android app {F36946182} |
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 .
{F36942533}
-- Achromatopsia users will perceive colors as gray scales, so we'll need to use different lightness levels. Check the example below:
{F36942537}
- 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.
==== Open questions
//Include any open questions here if needed.//
==== Design proposal
//Include the design proposal to unify diff colors here once it's done. Inventory and some explorations captured in [[ https://www.figma.com/file/fFSLW95kJxGlOx4wtqGw3D/Diff-colors---T333681?node-id=2227-45347&t=xBkZKZVbtrpvCYkn-11 | this Figma file ]].//
==== Acceptance criteria (or Done)
[] Audit of diff representation across different products and platforms
[] 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
[] Consult with relevant teams to adopt new diff colors on Web and Apps