Page MenuHomePhabricator

Code snippet in article missing syntax coloring
Open, LowPublicBUG REPORT

Description

How many times were you able to reproduce it?

Every time

Steps to reproduce

  1. Go to article "diff" on EN Wikipedia
  2. Scroll to "Usage" section, observe the 3 column area of code

Expected results

Code section has syntax coloring

Actual results

Code section does not (later code sections in the same article do)

Screenshots

IMG_E49A054AD91B-1.jpeg (834×1 px, 349 KB)

Environments observed

App version: 6.9.1 (1930)
OS versions: iOS 15.0.2
Device model: iPad Pro 2nd gen
Device language: EN

Affected articles?

  • Diff on EN

Event Timeline

This is different from other code snippets because it is not a normal syntax highlight fragment:

{{pre|
0a1,6
{{font color|darkgreen|> This is an important
> notice! It should
> therefore be located at
> the beginning of this
> document!
>}}
11,15d16
{{font color|darkred|< This paragraph contains
< text that is outdated.
< It will be deleted in the
< near future.
<}}
17c18
{{font color|darkred|< check this dokument. On}}
---
{{font color|darkgreen|> check this document. On}}
24a26,29
{{font color|darkgreen|>
> This paragraph contains
> important new additions
> to this document.}}}}

Interestingly enough however is that the rendered text content is also different, indicating a difference between core parsing and parsoid parsing ????

https://en.wikipedia.org/wiki/Diff#Usage
https://en.wikipedia.org/api/rest_v1/page/html/Diff#Usage

The main problem is the color schelme used: It you're deuteranope, you can't see the difference between non-bold "darkgreen" and "darkred" text on the greyish background, they both look exactly the same.
That color scheme is not accessible to about 15% of men (including me). To see the subtle difference, yuo need to zoom in the page a lot (with CTRL+NumpPadPlus).

I looked at the effective HTML code generated, colors are present (using CSS style "color:darkgreen" or "color:darkred") and it is not overriden by some other "!important" style, so it is rendered. However if you set your browser to use external filters (such as "night mode" or "red shift"), the small contrast disappears completely.

So using "font color" here is a bad choice in the article itself. However this does not occur when coloring is applied to the background (which covers a wider area). In Mediawiki diffs, the coloring uses background.

Be careful when choosing colors, espacially dark colors on text, which get even darker when using a browser with "red shift" or "dark mode" applied because this reduces their contrast, but also when not using it but you're deuteranope (partial color-blindness in the red-green space). The "hue" contrast between "darkred" and "darkgreen" is too low, compared to plain "red" and "green", but this is accentuated to the fact this is applid to thin text which where the lightness contrast is dominated by the background-vs-foreground which is much higher.

This accessiblity problem disappears when you use plani "red" vs. "darkgreen". (Note that the red component of RGB colors is the component that contributes the LEAST to the lightness value).

One good goal to design a colors palette is to design them first NOT in the "RGB" colorspace, but in the "HSV" colorsspace, and that all 3 values in that space that you xant to contrast clearly shown at least 20% of difference, or at least 30% for contrasting thin elements (such as text or graphics with thin lines). Or ask to a dozen of random male people you know (you need less if they are Caucasian) if they see the differences correctly (within them you'll find certainly at least 2 people not seeing the difference), and in fact most of them won't reply to your request (this is too evident for them) whereas the responses from deuteranopes will overwhelm the responses.

Why Caucasian or males? Because they are the most frequent people affected by this partial color blindness (most of them do not notice it in real life, but get in trouble when exposed to such design made by some designers, that think it's good (for them) to use subtle color changes. Such thing is true (for all people) to avoid the keidoscope or patchwork effect on non-essential features (because they are distracting readers that loose focus on what they read, and can cause visual fatigue), but for a "diff" when this contrast is really desired, forget that idea! (Oh, also don't assume that those people with "color blindness" are not seein a large gamut of colors, as most often it is ONLY a different gamut; true bichromies or achromies are very rare, and these people constantly need other "helpers" or directions and expect to look at them such as the ">" vs. "<" characters starting lines in a diff, or "+" vs. "-", that should remain present).