Page MenuHomePhabricator
Create Task
Maniphest T98988

Gray for active elements in the VE toolbar is too light
Closed, ResolvedPublic1 Estimated Story Points
Actions

Description

The color of the text of the active elements in the VE toolbar, is currently #555 (on a white background). This passes all WCAG contrast checks, but it still seems quite pale, and it keeps confusing me into thinking that various parts are inactive,
particularly because the text is next to

  • the thicker width lines of the icons (which hence appear darker),
  • the darker text of the page content,
  • the lightened text of the page Title
  • the even lighter grey of the down-triangle/arrow (which is due to the opacity: 0.3;)

ijItHVC.png (315×725 px, 33 KB)

Changes introduced in v0.17.9 of OOjs UI:

T98988 Toolbar active elements - OOjs UI Demos 2016-09-12.png (129×821 px, 12 KB)

(See also T89271: Gray for "inactive" elements in the toolbar is too light - Once that is darker, the text of the active elements will need to be correspondingly darker, too)

Details

SubjectRepoBranchLines +/-
MediaWiki theme: Align colour of toolbar and dropdown buttonsoojs/uimaster+1 -2
Customize query in gerrit

Related Objects
Search...

StatusSubtypeAssignedTask
 Resolved• SpageT88392 Update UI library documentation
 ResolvedVolker_ET118925 [GOAL] Style Guide - Guide on how/when to use components
 ResolvedVolker_ET151117 Make an official statement on which guide for WikimediaUI is the official one to remove confusion
 ResolvedVolker_ET110727 Consolidate documentation for recommended color palette
 ResolvedVolker_ET111117 [EPIC] Enhance accessibility of OOUI & MediaWiki UI library / LSG / MediaWiki General to screen readers and color-deficient users
 InvalidVolker_ET98526 Inactive notification badge colors not compliant with WCAG 2.0 accessibility guidelines
 ResolvedVolker_ET109915 Improve color palette to comply with WCAG 2.0 min level AA and color-deficiency-friendly.
ResolvedVolker_ET89271 Gray for "inactive" elements in the toolbar is too light
 ResolvedVolker_ET110555 Consolidate progressive and constructive buttons
 ResolvedVolker_ET136590 Come up with a better "active" (selected) state for buttons and especially button groups
 ResolvedVolker_ET123860 Apply `:hover` border color change to textInputWidgets as layed out in mockups and correct neutral button border color
 ResolvedVolker_ET123812 Invalid text input `border`/`box-shadow` and dialog error border color should be set to `@destructive`
 ResolvedVolker_ET127405 Review current style and integrate Messages and message boxes (errors, warnings) as WikimediaUI component
 DuplicateVolker_ET149657 MediaWiki theme: SelectFileWidget: Re-evaluate “File selection is not supported” message
 ResolvedNoneT153506 Echo's "You have new messages" fails WCAG AAA contrast guidelines and the colors are nasty
 ResolvedJdlrobsonT166740 Warning box inconsistent on collections view
 ResolvedJdlrobsonT166915 Create an abstraction for the message box components (warningbox, errorbox etc)
 Resolved• NirzarT164628 Anon Edit warning screen has UI bugs [design debt]
 ResolvedVolker_ET219826 Add 'error' icon to 'alerts' icon pack
 OpenNoneT101995 Improvements to the toolbar system
 ResolvedNoneT98988 Gray for active elements in the VE toolbar is too light

Event Timeline

Quiddity created this task.May 13 2015, 5:58 PM
Quiddity raised the priority of this task from to Needs Triage.
Quiddity updated the task description. (Show Details)
Quiddity added projects: OOUI, UI-Standardization, VisualEditor.
Quiddity subscribed.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 13 2015, 5:58 PM
Quiddity mentioned this in T89271: Gray for "inactive" elements in the toolbar is too light.May 13 2015, 6:00 PM
nshahquinn-wmf triaged this task as Medium priority.May 14 2015, 9:24 PM
nshahquinn-wmf set Security to None.
matmarex subscribed.May 14 2015, 9:27 PM

Interesting that the text of all dropdown menus is pure black #000, not #555 like the toolbar. I'm not sure if that's intentional, or emergent behavior that got "codified".

• Mattflaschen-WMF removed a project: UI-Standardization.May 24 2015, 12:42 PM
Jdforrester-WMF added a parent task: T101995: Improvements to the toolbar system.Jun 10 2015, 2:53 PM
• Nirzar subscribed.Jun 10 2015, 6:40 PM
Jdforrester-WMF moved this task from To Triage to Freezer on the VisualEditor board.Jun 18 2015, 12:58 AM
• Prtksxna subscribed.Jul 22 2015, 5:27 PM
In T98988#1286120, @matmarex wrote:

Interesting that the text of all dropdown menus is pure black #000, not #555 like the toolbar. I'm not sure if that's intentional, or emergent behavior that got "codified".

Patch-For-Review at https://gerrit.wikimedia.org/r/226316

gerritbot subscribed.Jul 22 2015, 5:38 PM

Change 226316 had a related patch set uploaded (by Jforrester):
MediaWiki theme: Align colour of toolbar and dropdown buttons

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

gerritbot added a project: Patch-For-Review.Jul 22 2015, 5:38 PM
gerritbot added a comment.Jul 22 2015, 5:59 PM

Change 226316 merged by jenkins-bot:
MediaWiki theme: Align colour of toolbar and dropdown buttons

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

Jdforrester-WMF mentioned this in rGOJU31baa7f0d771: MediaWiki theme: Align colour of toolbar and dropdown buttons.Jul 22 2015, 6:00 PM
• Prtksxna removed a project: Patch-For-Review.Jul 22 2015, 6:01 PM
Volker_E added a parent task: T89271: Gray for "inactive" elements in the toolbar is too light.Jul 4 2016, 1:24 PM
Volker_E updated the task description. (Show Details)Aug 29 2016, 5:50 PM
Volker_E updated the task description. (Show Details)Sep 12 2016, 10:49 PM
Volker_E subscribed.Sep 12 2016, 10:55 PM

Version 0.17.9 of OOjs UI will roll out an overhaul of various elements to comply to WCAG 2.0 level AA guidelines, based on a new, improved color palette by design folks at WMF. A small part of this change is also increasing contrast on toolbar tool items from currently #555 to #222.
I'm leaving it up to @Quiddity as author of this task to judge and (presumptively) change this task to “resolved”.

Volker_E added a project: UI-Standardization-Kanban.Sep 13 2016, 12:00 AM
Restricted Application added a project: UI-Standardization. · View Herald TranscriptSep 13 2016, 12:00 AM
Volker_E moved this task from Backlog to Doing… on the UI-Standardization-Kanban board.Sep 13 2016, 12:01 AM
Jdforrester-WMF moved this task from Backlog to OOjs-UI-0.17.9 on the OOUI board.Sep 13 2016, 4:40 PM
Jdforrester-WMF edited projects, added OOUI (OOjs-UI-0.17.9); removed OOUI.
Volker_E moved this task from Doing… to Review on the UI-Standardization-Kanban board.Sep 15 2016, 9:28 AM
Quiddity closed this task as Resolved.Sep 19 2016, 4:46 PM

Looks good to me.

Volker_E moved this task from Review to Done on the UI-Standardization-Kanban board.Sep 19 2016, 4:57 PM
Jdforrester-WMF set the point value for this task to 1.Sep 21 2016, 5:10 PM
Jdforrester-WMF moved this task from Freezer to External and Administrivia on the VisualEditor board.
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL