Page MenuHomePhabricator

Change CodeMirror's comment color CSS
Closed, ResolvedPublic1 Story Points

Description

TL,DR summary: Change the comment text color to #84A0A0, as suggested by Kaldari below, in T170067#3440124.


The <!-- comment --> text is currently rendered in #AAA text, which is drastically under legitibility standards https://snook.ca/technical/colour_contrast/colour.html#fg=AAAAAA,bg=FFFFFF
Comments are often important information directed at editors, and should be clearly legible.

Notes:

Event Timeline

Quiddity created this task.Jul 9 2017, 3:40 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 9 2017, 3:40 AM

I'd actually suggest considering a different color from gray. Green is a popular color for comments: https://www.mediawiki.org/wiki/User:Remember_the_dot/Syntax_highlighter uses green (though barely distinguishable from gray), the syntaxhighlight extension uses a very bluish green, https://xkcd.com/156/ suggests green as well.

We're already using green for tags.

#777 is almost indistinguishable from black, especially for someone with bad eyesight. What do most IDEs use? Mine uses #ae88c0 (a light purple), which also fails the contrast test.

We need to keep in mind here that the primary goal is to make different kinds of content distinguishable from each other. People with bad eyesight should stick with the default editor as that is going to be most legible. I imagine that at least half the colors in CodeMirror fail the contrast test as most colors are not high contrast against white (basically only black, purple, and blue). If we limit ourselves to only black purple and blue, however, we are throwing the baby out with the bathwater.

Schnark added a comment.EditedJul 14 2017, 9:05 AM

The Syntaxhighlight extension uses #408080, which passes WCAG AA according to http://webaim.org/resources/contrastchecker/, and is distinguishable from blue links (which pass as well) and green tags (which don't pass, #280 would pass, without visual difference for me, but that's not what this task here is about):

#777 is almost indistinguishable from black, especially for someone with bad eyesight. What do most IDEs use? Mine uses #ae88c0 (a light purple), which also fails the contrast test.
We need to keep in mind here that the primary goal is to make different kinds of content distinguishable from each other. People with bad eyesight should stick with the default editor as that is going to be most legible. I imagine that at least half the colors in CodeMirror fail the contrast test as most colors are not high contrast against white (basically only black, purple, and blue). If we limit ourselves to only black purple and blue, however, we are throwing the baby out with the bathwater.

Good points. I wrote a bad bug report here. My main point should've been: "I personally can barely read these, and I have great eyesight! They should be prominent, because they're often very important information for editors to be aware of."
I'll overhaul the task description.
I like Schnark's suggestion.

How about we use #999 and italicize comments to make them stand out? That's fairly common in IDEs.

Quiddity renamed this task from Increase contrast of CodeMirror's comment color CSS to Re-evaluate CodeMirror's comment color CSS.Jul 14 2017, 7:12 PM
Quiddity updated the task description. (Show Details)

Sublime uses either:

  • #819090 (grey) + italics
  • #0066ff (blue) + italics

BBEdit uses:

  • #ae88c0 (light purple)

Atom uses either:

  • #9b9988 (brownish grey) + italics
  • #a0a1a7 (grey) + italics

Kimodo Edit offers several options:

  • #008000 (green)
  • #b0b0b0 (light grey)
  • #c0c0c0 (light grey)
  • #b4b7b4 (light grey)
  • #959CA1 (bluish grey)

If we average all of those together, we get #84A0A0, which is a nice steel grey-blue. It's darker than what we're using currently, but not by a whole lot.

DannyH added a subscriber: Nirzar.
DannyH added a subscriber: DannyH.
DannyH renamed this task from Re-evaluate CodeMirror's comment color CSS to Change CodeMirror's comment color CSS.Nov 8 2017, 12:25 AM
DannyH triaged this task as Normal priority.
DannyH updated the task description. (Show Details)
DannyH updated the task description. (Show Details)
DannyH moved this task from Epic backlog to To be estimated/discussed on the Community-Tech board.
kaldari set the point value for this task to 1.Nov 28 2017, 11:45 PM
Niharika claimed this task.Dec 4 2017, 4:53 PM
Niharika added a project: Google-Code-in-2017.

I'm claiming this (for now) and putting this forward as a GCI task for a student to take on. I'll be mentoring.

divadsn claimed this task.Dec 4 2017, 11:09 PM
divadsn added a subscriber: divadsn.

Taking over the task, patch is coming soon :)

Change 395146 had a related patch set uploaded (by Divadsn; owner: Divadsn):
[mediawiki/extensions/CodeMirror@master] Update comment text color CSS

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

I also italicized the comments, just to have it to more stand out from the rest of the code, which will definetly be seen by the editor.

I also italicized the comments, just to have it to more stand out from the rest of the code, which will definetly be seen by the editor.

It is probably best to Not add italics, because some languages/script-systems don't use italics at all.
[I don't think we have a specific list of languages anywhere (?), but there are 2 mentions of "italics" in https://www.mediawiki.org/wiki/Localisation which are both related, and the first mentions "especially some Asian scripts".]

I also italicized the comments, just to have it to more stand out from the rest of the code, which will definetly be seen by the editor.

@Quiddity is right. No italics required. :)

Ok, I've reverted the font-style then :)

Niharika closed this task as Resolved.Dec 5 2017, 9:51 AM
Niharika moved this task from Estimated to Archive on the Community-Tech board.

Thanks!

Change 395146 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Update comment text color CSS

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