Page MenuHomePhabricator

Use grey text for section numbers in Table of Contents boxes
Closed, ResolvedPublic

Description

I suggest tweaking the mediawiki CSS for .tocnumber to use a grey color.
This would make it easier to read the Table of Contents, by more clearly distinguishing the content (Headings) from the metadata (section numbers). Especially if the Headings start with numbers.

The code I use in my global.css:

/* Tweak Table of Contents boxes, to have grey numbers */
.tocnumber {color:#333 !important;}

Before/After screenshots:


The solution uses:

.tocnumber {
	[]
	color: #222;
}

from color palette M82 for body copy text.

Event Timeline

Quiddity created this task.Jan 30 2016, 8:11 PM
Quiddity updated the task description. (Show Details)
Quiddity raised the priority of this task from to Needs Triage.
Quiddity added a project: Design.
Quiddity added a subscriber: Quiddity.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald TranscriptJan 30 2016, 8:11 PM
Nemo_bis set Security to None.
Danny_B moved this task from Unsorted to Colors on the Accessibility board.
Danny_B added subscribers: Danny_B, violetto.

There is also a proposal to remove the numbers entirely: T44059: Kill section auto-numbering

Devirk claimed this task.Feb 1 2016, 1:45 PM

In the recent T109915 task, we came up with 3 black/gray for text colors that is colorblind-friendly. They were #000, #222, and #949494 (for disabled text, placeholder text).

#000

#222

I would use #222 if the point is also to have the numbers to be less emphasized. #000 is too much emphasis on the numbers, although the difference is not extremely obvious.

I would use #222 if the point is also to have the numbers to be less emphasized. #000 is too much emphasis on the numbers, although the difference is not extremely obvious.

Yup, the aim is to reduce the emphasis, and make it easier to ignore the numbers when not needed, but still consult when desired.

For reference...
I believe I picked #333 (many years ago) because that's what the site footer uses. (I think #333 was previously used in additional locations(?), but I can't find any more instances at the moment.)
Looking around a bit more, I see #4d4d4d is currently used for the [[mediawiki:sidebar]] section-headings, and also for the "More ▼" menu text and arrow color.
Lastly, the Wikidata "Edit links" links are using #797979. http://i.imgur.com/tNGgsVU.png

Also, that's a good reminder...

In the recent T109915 task, we came up with 3 black/gray for text colors that is colorblind-friendly. They were #000, #222, and #949494 (for disabled text, placeholder text).

Does this have implications for the current default text color of content #252525 ? (on most but not all wikis, IIRC) If so, is there a task or discussion for that?
(I'd forgotten about that, as I use global.css to override #content to black, hence the #333 I use has more contrast for me, than it would for others... :/ )

Praveenraj added a subscriber: Praveenraj.EditedFeb 3 2016, 6:30 PM

Hi, I am new to wikimedia, How can I contribute in solving this issue, I have cloned mediawiki repository, the class "tocnumber" is in the css file content.css in mediawiki/resources/src/mediawiki.skinning/ folder, So do I need to modify that content.css css file and update the patch??

Danny_B triaged this task as Low priority.Feb 6 2016, 12:47 AM

Also, that's a good reminder...

In the recent T109915 task, we came up with 3 black/gray for text colors that is colorblind-friendly. They were #000, #222, and #949494 (for disabled text, placeholder text).

Does this have implications for the current default text color of content #252525 ? (on most but not all wikis, IIRC) If so, is there a task or discussion for that?
(I'd forgotten about that, as I use global.css to override #content to black, hence the #333 I use has more contrast for me, than it would for others... :/ )

Yes definitely impacts #252525. I think we can just make a small change to #222. #222 currently is planned for secondary text, but I think a #000 on #FFF is too high contrast for the Photophobia. There is not a task yet, I think we're still figuring how to best tackle these changes. We've already been working up a base.css that contains these new changes!

@Volker_E, would you be able to help @Praveenraj?

@Volker_E, I am new to mediawiki, I have been exposed to front end design and development, I am now studying the source code and working of mediawiki.

Danny_B moved this task from Backlog to Doing on the good first bug board.Feb 18 2016, 3:33 PM

@Praveenraj @violetto Absolutely! If you need further specifics on how to write a corresponding patch, please feel free to reach out to me. Here or via IRC: Volker_E

Hello! I've already submitted a patch for this task. Please review it. https://gerrit.wikimedia.org/r/#/c/272708/ .

Hello! I've already submitted a patch for this task. Please review it. https://gerrit.wikimedia.org/r/#/c/272708/ .

Thank you.

Weird, that @gerritbot didn't notify it here...

Yeah. Even I was wondering. Wonder if something's wrong with my commit message.

Change 272708 had a related patch set uploaded (by TheDJ):
Grey text used for section numbers in Table of Contents boxes

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

TheDJ added a subscriber: TheDJ.Feb 23 2016, 4:09 PM

Hello! I've already submitted a patch for this task. Please review it. https://gerrit.wikimedia.org/r/#/c/272708/ .

Weird, that @gerritbot didn't notify it here...

That's because the Bug: line was not at the bottom of the commit message. That's a safety feature, so that not every single bug you mention get's links to the commit. I've amended the message and it's now reported by gerritbot.

TheDJ added a comment.EditedFeb 23 2016, 4:11 PM

BTW. this seems like a change that could VERY easily be tested on English Wikipedia before we apply it everywhere, by using Common.css. Just an idea.

BTW. this seems like a change that could VERY easily be tested on English Wikipedia before we apply it everywhere, by using Common.css. Just an idea.

Good thought. I've proposed it at https://en.wikipedia.org/wiki/MediaWiki_talk:Common.css#Use_grey_text_for_section_numbers_in_Table_of_Contents_boxes

Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptJul 1 2016, 2:03 PM
Izno added a subscriber: Izno.Sep 13 2016, 2:43 PM

Change 272708 merged by jenkins-bot:
Change .tocnumber to use grey text for section numbers in Table of Contents boxes

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

Volker_E reopened this task as Open.Oct 27 2016, 11:18 PM
Volker_E updated the task description. (Show Details)
Volker_E closed this task as Resolved.