Page MenuHomePhabricator

Selected tab on Special:Preferences hard to distinguish from other tabs
Closed, ResolvedPublic


The OOUI tabs on Special:Preferences (T117781) make it very hard to distinguish the selected tab from the other tabs, especially when your monitor isn't well calibrated.
The highlighted tab has background #fff, while the others have #eaecf0 (Base80), which can be hard to see.
Using #c8ccd1 (Base70) instead as background for the other tabs would make it much easier to distinguish the currently selected tab.

Event Timeline

It's currently featuring

  • a higher contrast than buttons do to background
  • a higher contrast than it was in the original layout

image.png (672×1 px, 112 KB)

One possibility would be to de-emphasize the non-selected tab labels by using #444 instead of #222 and set the active tab to #000

image.png (522×1 px, 79 KB)

Change 464438 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] themes: Increase contrast between normal & selected TabOptionWidget

The contrast for #444 on #eaecf0 is 8.23:1 and therefore fulfils level AA conformance successfully.

Change 464438 merged by jenkins-bot:
[oojs/ui@master] TabOptionWidget: Increase contrast between normal & selected states

Volker_E claimed this task.
Volker_E triaged this task as Low priority.
Volker_E moved this task from Reviewing to OOUI-0.29.1 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.29.1); removed OOUI.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.

Change 464607 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.29.1

Change 464607 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.29.1