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

Assigned To

Authored By

	Quiddity
	Jan 30 2016, 8:11 PM

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.

Details

	Subject	Repo	Branch	Lines +/-
	Change .tocnumber to use grey text for section numbers in Table of Contents boxes	mediawiki/core	master	+1 -1

Customize query in gerrit

Related Objects

Mentioned In: T181180: Table of contents doesn't have gray numbers
T131992: Update colours to follow Wikimedia style guide
E196: Code Review Office Hours
T127830: Gerritbot didn't notify about patch in task.
Mentioned Here: M82: Color palette (Wikimedia Design Style Guide/WikimediaUI)
T109915: Improve color palette to comply with WCAG 2.0 min level AA and color-deficiency-friendly.
T44059: Remove section auto-numbering

Event Timeline

Quiddity created this task.Jan 30 2016, 8:11 PM

Quiddity raised the priority of this task from to Needs Triage.

Quiddity updated the task description. (Show Details)

Quiddity added a project: Design.

Quiddity subscribed.

Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald TranscriptJan 30 2016, 8:11 PM

Nemo_bis added a project: MediaWiki-User-Interface.Jan 30 2016, 11:16 PM

Nemo_bis set Security to None.

Danny_B added projects: Accessibility, good first task.Jan 30 2016, 11:35 PM

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: Remove 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).

Screenshot 2016-02-01 17.13.37.png (326×299 px, 37 KB)

#000

Screenshot 2016-02-01 17.13.49.png (325×301 px, 37 KB)

#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.

In T125317#1988573, @violetto wrote:

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 T125317#1988573, @violetto wrote:

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... :/ )

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??

Volker_E subscribed.Feb 4 2016, 10:29 PM

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

Also, that's a good reminder...

In T125317#1988573, @violetto wrote:

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 task 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/ .

In T125317#2055165, @Devirk wrote:

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.

Danny_B mentioned this in T127830: Gerritbot didn't notify about patch in task..Feb 23 2016, 1:19 PM

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

gerritbot added a project: Patch-For-Review.Feb 23 2016, 2:58 PM

In T125317#2055171, @Danny_B wrote:

In T125317#2055165, @Devirk wrote:

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.

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.

In T125317#2055575, @TheDJ wrote:

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

@Quiddity @TheDJ Great idea!

Danny_B mentioned this in E196: Code Review Office Hours.May 25 2016, 11:20 AM

Volker_E added projects: UI-Standardization, UI-Standardization-Kanban.Jul 1 2016, 2:03 PM

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

Izno subscribed.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

Jdforrester-WMF closed this task as Resolved.Oct 27 2016, 11:14 PM

Jdforrester-WMF edited projects, added MW-1.29-release (WMF-deploy-2016-11-01_(1.29.0-wmf.1)); removed Patch-For-Review.

Volker_E reopened this task as Open.Oct 27 2016, 11:18 PM

Volker_E closed this task as Resolved.