Page MenuHomePhabricator

Diff colors in dark mode are not accessible
Open, Stalled, Needs TriagePublicBUG REPORT

Description

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

*Visit https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Conflict-title-0.14501166074480598-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n&diff=623464&oldid=623463&safemode=1

  • Switch to night mode
  • Check color contrast for the highlighted text of removed content

What happens?:
Color contrast issues.

What should have happened instead?:

No color contrast issues.

Screenshots:

Screenshot 2024-07-02 at 12.09.57 PM.png (874×983 px, 196 KB)

Screenshot 2024-07-02 at 12.10.06 PM.png (874×983 px, 195 KB)

Per @CCiufo-WMF :
I think we will need to either:

  • Revisit the background color for deleted content in dark mode; or
  • Revisit which colors are used for the text within deleted content in dark mode

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

Other information (browser name/version, screenshots, etc.):
Also impacts Special:AllMessages (see T367827)

Event Timeline

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

[design/codex@main] tokens: Update diff background and border tokens in dark mode

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

CCiufo-WMF renamed this task from Inline diff colors in dark mode are not accessible to Diff colors in dark mode are not accessible.Jul 2 2024, 4:02 PM
CCiufo-WMF updated the task description. (Show Details)
CCiufo-WMF subscribed.
CCiufo-WMF added a subscriber: DTorsani-WMF.

I would recommend we keep this open as a known issue until we can further refine the colors as outlined by @DTorsani-WMF in T361717#9939699.

Using the 800-level option tokens from Codex, as proposed in https://gerrit.wikimedia.org/r/1050485, would decrease overall usability of the diffs interface for the sake of achieving a specific contrast ratio. The content added and removed colors would be almost indistinguishable from the page background (see below screenshots).

Screenshot 2024-07-02 at 11.58.40 AM.png (874×983 px, 196 KB)

Screenshot 2024-07-02 at 11.58.34 AM.png (874×983 px, 194 KB)

If we do need an immediate solution, I think we should explore applying different decision tokens to the highlighted diff text (color-emphasized rather than color-base) instead of changing any of the background colors. We would just need to be conscious of the fact that the background colors may change again in T333681, possibly requiring this decision to be revisited.

The resulting contrast would be accessible at 4.56:1

image.png (390×490 px, 61 KB)

I also noticed that in the "default" (side-by-side) wikitext diffs, the diff text already has an increased font weight (bold/700), while the inline version does not...

Screenshot 2024-07-02 at 12.12.04 PM.png (92×680 px, 26 KB)

Screenshot 2024-07-02 at 12.12.10 PM.png (92×680 px, 29 KB)

Maybe this is additional justification for using color-emphasized for both diff styles, at least temporarily?

CCiufo-WMF changed the task status from Open to Stalled.Jul 2 2024, 5:10 PM
CCiufo-WMF attached a referenced file: F56175283: image.png. (Show Details)

The Web and Design System teams have decided to log this as a known issue with dark mode that will be addressed once a more holistic approach is determined for diffs as part of T333681.

Change #1050485 abandoned by Dtorsani:

[design/codex@main] tokens: Update diff background and border tokens in dark mode

Reason:

As discussed among Web and DST, we will not change these tokens at this time but will address this as a part of T333681.

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