Page MenuHomePhabricator
Create Task
Maniphest T248393

Amend Base10 color to provide 3:1 contrast to Accent50
Closed, ResolvedPublic
Actions

Assigned To
Volker_E
Authored By
Volker_E
Mar 24 2020, 3:03 PM
Tags
Referenced Files
F31700204: image.png
Mar 24 2020, 3:14 PM
F31700198: image.png
Mar 24 2020, 3:14 PM
F31700188: image.png
Mar 24 2020, 3:03 PM
F31700193: image.png
Mar 24 2020, 3:03 PM
Subscribers
Aklapper
Esanders
Jdforrester-WMF
Pginer-WMF
• Prtksxna
RHo
Sarai-WMDE
View All 9 Subscribers

Description

As of now Base10 #222 in combination with Accent50 #36c fails WCAG 2.0 level AA slightly by providing 2.96:1 contrast.

While amending Accent50 seems not only problematic from a branding & visual disruption perspective, Base10 is currently the only base that doesn't follow the blue tint logic and would be relatively easy to amend.

Proposing therefore changing Base10 from #222 to #202122 to reach required 3:1 contrast ratio.

BeforeAfter
image.png (1×1 px, 127 KB)
image.png (1×1 px, 132 KB)
image.png (940×830 px, 130 KB)
image.png (956×832 px, 151 KB)

Proposal and Process

  • Agree on color amendment – agreed on in Design Style Guide meeting of 2020-04-07
  • Rollout to
    • Style Guide,
    • WikimediaUI Base and
    • OOUI in same release cycle
  • Slowly rolling out to further code occurrences as well

Note, Wikimedia deployed Translate extension is excluded from color updates, as it's completely out of sync from UI pattern perspective and single color updates would just side-track extension.

Details

SubjectRepoBranchLines +/-
Update wikimedia-ui-basewikibase/vuejs-componentsmaster+4 -4
bridge: update WikimediaUI Base and OOUImediawiki/extensions/Wikibasemaster+23 -60
Update 'wikimedia-ui-base' to v0.15.0wikimedia/portalsmaster+34 -15
build: Upgrade wikimedia-ui-base from 0.14.0 to 0.15.0mediawiki/extensions/Wikibasemaster+12 -10
Amend Base10 color and remove (affected) PNG fallbacksmediawiki/extensions/UniversalLanguageSelectormaster+27 -33
Amend Base10 color from `#222` to `#202122`mediawiki/extensions/MultimediaViewermaster+38 -29
FeedUtils: Amend Base10 colormediawiki/coremaster+6 -6
Amend Base10 colormediawiki/extensions/WikibaseMediaInfomaster+1 -1
Amend Base10 colormediawiki/extensions/MachineVisionmaster+1 -1
Amend Base10 colormediawiki/extensions/3Dmaster+1 -1
Amend color Base10 from #222 to #202122mediawiki/extensions/Wikibasemaster+1 -1
Update 'wikimedia-ui-base' to v0.15.0mediawiki/extensions/Kartographermaster+41 -17
Amend Base10 color and hover derivativemediawiki/extensions/GuidedTourmaster+3 -3
Amend Base10 color and hover derivativemediawiki/extensions/ContentTranslationmaster+7 -7
Amend Base10 color, add and amend WikimediaUI Base variables notationmediawiki/extensions/Echomaster+19 -12
Amend Base10mediawiki/extensions/AdvancedSearchmaster+1 -1
Update 'wikimedia-ui-base' to v0.15.0mediawiki/extensions/JsonConfigmaster+22 -18
Amend Base10 color and hover derivativemediawiki/extensions/GettingStartedmaster+11 -11
Amend Base10 color and hover derivativemediawiki/coremaster+14 -14
Amend Base10 color and hover derivativemediawiki/skins/Vectormaster+5 -5
Update OOUI to v0.38.0mediawiki/coremaster+562 -426
Update 'wikimedia-ui-base' dependency to amend Base10 coloroojs/uimaster+12 -12
Amend Base10 color and hover derivativewikimedia-ui-basemaster+8 -8
Show related patches Customize query in gerrit

Related Objects

Event Timeline

Volker_E created this task.Mar 24 2020, 3:03 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 24 2020, 3:03 PM
Volker_E updated the task description. (Show Details)Mar 24 2020, 3:14 PM
Esanders subscribed.Mar 24 2020, 3:44 PM

2.96 seems close enough to 3.00 as to make no difference, certainly within the accuracy levels that their research suggested that 3.00 should be the target (I imagine some rounding up happened to get it to a nice integer).

Pginer-WMF subscribed.Mar 24 2020, 4:02 PM
Volker_E added a comment.EditedMar 24 2020, 5:19 PM

@Esanders Let's assume for a moment that this is a hard boundary, is there anything on the proposed color itself that you'd oppose?
We've been going above and beyond to make all colors of the palette conform to WCAG 2 level AA on the standards' rules. As we rely (and will prob even more so in future on certain instrumentation, aka automated tests, it's useful to make this lil change in order to not set a ton of exceptions, but adhere to the rule.

scblr subscribed.Mar 25 2020, 6:16 PM
scblr added a comment.Mar 25 2020, 6:21 PM

The reasoning to change #222222 to #202122 makes sense to me.

Quick in regards to the task’s description @Volker_E:

Base50 is currently the only base that doesn't follow the blue tint logic and would be relatively easy to amend.

Do you mean: Base10 is currently the only base that doesn't follow the blue tint logic and would be relatively easy to amend ?

Volker_E updated the task description. (Show Details)Mar 25 2020, 7:51 PM

@schoenbaechler Thanks, task description fixed.

Volker_E added a subscriber: Sarai-WMDE.Apr 6 2020, 7:02 PM
Volker_E triaged this task as High priority.Apr 7 2020, 7:10 AM
Volker_E added a project: Accessibility.
Volker_E added a subscriber: Jdforrester-WMF.
Restricted Repository Identity mentioned this in R2668:1fdb5adf9688: [WIP] “Resources”/“Components”: Amend Base10 color.Apr 7 2020, 10:06 AM
• Prtksxna subscribed.Apr 10 2020, 1:55 AM
Restricted Repository Identity mentioned this in R2668:1287f91072c8: “Resources”/“Components”: Amend Base10 color.Apr 10 2020, 3:17 AM
Volker_E added a project: Patch-For-Review.Apr 10 2020, 4:55 AM
Volker_E updated the task description. (Show Details)Apr 10 2020, 5:15 AM
Volker_E updated the task description. (Show Details)
Restricted Repository Identity mentioned this in R2668:593080b5ff07: “Resources”/“Components”: Amend Base10 color.Apr 10 2020, 5:53 AM
Restricted Repository Identity mentioned this in R2668:a4d57941cabb: “Resources”/“Components”: Amend Base10 color (#364).Apr 10 2020, 10:46 PM
gerritbot added a comment.Apr 10 2020, 11:55 PM

Change 588061 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[wikimedia-ui-base@master] Amend Base10 color and hover derivative

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

Iniquity added a project: Notice.Apr 11 2020, 2:47 AM
gerritbot added a comment.Apr 13 2020, 5:39 PM

Change 588061 merged by jenkins-bot:
[wikimedia-ui-base@master] Amend Base10 color and hover derivative

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

Volker_E updated the task description. (Show Details)Apr 14 2020, 4:05 AM
gerritbot added a comment.Apr 14 2020, 10:06 PM

Change 588798 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Update 'wikimedia-ui-base' dependency to amend Base10 color

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

gerritbot added a comment.Apr 14 2020, 10:16 PM

Change 588798 merged by jenkins-bot:
[oojs/ui@master] Update 'wikimedia-ui-base' dependency to amend Base10 color

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

gerritbot added a comment.Apr 15 2020, 1:33 AM

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

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

gerritbot added a comment.Apr 15 2020, 5:52 AM

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

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

RHo subscribed.Apr 15 2020, 12:59 PM
Jdforrester-WMF updated the task description. (Show Details)Apr 15 2020, 1:34 PM
gerritbot added a comment.Apr 15 2020, 4:31 PM

Change 589058 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/Vector@master] Amend Base10 color and hover derivative

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

gerritbot added a comment.Apr 15 2020, 5:14 PM

Change 589058 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Amend Base10 color and hover derivative

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

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.30; 2020-04-28).Apr 15 2020, 6:00 PM
gerritbot added a comment.Apr 15 2020, 11:33 PM

Change 589156 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Amend Base10 color and hover derivative

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

gerritbot added a comment.Apr 15 2020, 11:48 PM

Change 589158 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/AdvancedSearch@master] Amend Base10

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

gerritbot added a comment.Apr 16 2020, 12:07 AM

Change 589156 merged by jenkins-bot:
[mediawiki/core@master] Amend Base10 color and hover derivative

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

gerritbot added a comment.Apr 16 2020, 12:10 AM

Change 589160 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/GettingStarted@master] Amend Base10 color and hover derivative

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

gerritbot added a comment.Apr 16 2020, 12:48 AM

Change 589160 merged by jenkins-bot:
[mediawiki/extensions/GettingStarted@master] Amend Base10 color and hover derivative

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

gerritbot added a comment.Apr 16 2020, 1:03 AM

Change 589167 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Echo@master] Amend Base10 color, add and amend WikimediaUI Base variables notation

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

gerritbot added a comment.Apr 16 2020, 2:05 AM

Change 589172 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/ContentTranslation@master] Amend Base10 color and hover derivative

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

gerritbot added a comment.Apr 16 2020, 3:22 AM

Change 589178 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Kartographer@master] Update 'wikimedia-ui-base' to v0.15.0

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

gerritbot added a comment.Apr 16 2020, 4:07 AM

Change 589179 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/JsonConfig@master] Update 'wikimedia-ui-base' to v0.15.0

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

gerritbot added a comment.Apr 16 2020, 4:26 AM

Change 589181 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/GuidedTour@master] Amend Base10 color and hover derivative

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

gerritbot added a comment.Apr 16 2020, 4:28 AM

Change 589179 merged by jenkins-bot:
[mediawiki/extensions/JsonConfig@master] Update 'wikimedia-ui-base' to v0.15.0

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

gerritbot added a comment.Apr 16 2020, 4:28 AM

Change 589158 merged by jenkins-bot:
[mediawiki/extensions/AdvancedSearch@master] Amend Base10

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

gerritbot added a comment.Apr 16 2020, 4:28 AM

Change 589167 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Amend Base10 color, add and amend WikimediaUI Base variables notation

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

gerritbot added a comment.Apr 16 2020, 4:43 AM

Change 589172 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Amend Base10 color and hover derivative

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

Volker_E moved this task from Backlog to In Dev/Progress on the Wikimedia Design Style Guide board.Apr 16 2020, 7:18 AM
gerritbot added a comment.Apr 16 2020, 3:12 PM

Change 589328 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/extensions/Wikibase@master] build: Upgrade wikimedia-ui-base from 0.14.0 to 0.15.0

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

gerritbot added a comment.Apr 16 2020, 3:17 PM

Change 589181 merged by jenkins-bot:
[mediawiki/extensions/GuidedTour@master] Amend Base10 color and hover derivative

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

gerritbot added a comment.Apr 16 2020, 3:17 PM

Change 589178 merged by jenkins-bot:
[mediawiki/extensions/Kartographer@master] Update 'wikimedia-ui-base' to v0.15.0

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

gerritbot added a comment.Apr 16 2020, 3:59 PM

Change 589132 had a related patch set uploaded (by VolkerE; owner: Ladsgroup):
[mediawiki/extensions/Wikibase@master] Amend color Base10 from #222 to #202122

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

Restricted Repository Identity mentioned this in rEGTO70ae02758303: Amend Base10 color and hover derivative.Apr 16 2020, 4:03 PM
gerritbot added a comment.Apr 16 2020, 5:01 PM

Change 589132 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Amend color Base10 from #222 to #202122

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

gerritbot added a comment.Apr 18 2020, 3:22 AM

Change 589806 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/WikibaseMediaInfo@master] Amend Base10 color

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

gerritbot added a comment.Apr 18 2020, 3:38 AM

Change 589813 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MachineVision@master] Amend Base10

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

gerritbot added a comment.Apr 18 2020, 3:46 AM

Change 589816 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/UniversalLanguageSelector@master] Amend Base10 color

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

gerritbot added a comment.Apr 18 2020, 3:49 AM

Change 589817 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] FeedUtils: Amend Base10 color

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

gerritbot added a comment.Apr 18 2020, 4:32 AM

Change 589822 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/3D@master] Amend Base10 color

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

gerritbot added a comment.Apr 19 2020, 9:41 PM

Change 589822 merged by jenkins-bot:
[mediawiki/extensions/3D@master] Amend Base10 color

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

gerritbot added a comment.Apr 20 2020, 7:48 AM

Change 589806 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Amend Base10 color

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

gerritbot added a comment.Apr 20 2020, 2:32 PM

Change 589813 merged by jenkins-bot:
[mediawiki/extensions/MachineVision@master] Amend Base10 color

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

gerritbot added a comment.Apr 20 2020, 8:05 PM

Change 589817 merged by jenkins-bot:
[mediawiki/core@master] FeedUtils: Amend Base10 color

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

gerritbot added a comment.Apr 20 2020, 8:05 PM

Change 589075 had a related patch set uploaded (by VolkerE; owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@master] bridge: update WikimediaUI Base and OOUI

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

Volker_E updated the task description. (Show Details)Apr 20 2020, 8:08 PM
gerritbot added a comment.Apr 20 2020, 8:31 PM

Change 591168 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MultimediaViewer@master] Amend Base10 color from #222 to #202122

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

gerritbot added a comment.Apr 20 2020, 9:19 PM

Change 591168 merged by jenkins-bot:
[mediawiki/extensions/MultimediaViewer@master] Amend Base10 color from #222 to #202122

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

gerritbot added a comment.Apr 21 2020, 2:57 AM

Change 591256 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[wikimedia/portals@master] Update 'wikimedia-ui-base' to v0.15.0

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

Volker_E mentioned this in T240514: Define and add another Base color between Base10 and Base20?.Apr 21 2020, 3:43 AM
gerritbot added a comment.Apr 21 2020, 11:43 AM

Change 589816 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Amend Base10 color and remove (affected) PNG fallbacks

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

gerritbot added a comment.Apr 21 2020, 4:27 PM

Change 589328 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] build: Upgrade wikimedia-ui-base from 0.14.0 to 0.15.0

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

gerritbot added a comment.Apr 21 2020, 5:18 PM

Change 591256 merged by jenkins-bot:
[wikimedia/portals@master] Update 'wikimedia-ui-base' to v0.15.0

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

gerritbot added a comment.Apr 21 2020, 8:48 PM

Change 589075 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: update WikimediaUI Base and OOUI

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

Volker_E closed this task as Resolved.Apr 21 2020, 9:17 PM
Volker_E claimed this task.
Volker_E removed a project: Patch-For-Review.
Volker_E updated the task description. (Show Details)

Successfully resolved. 🎉

scblr mentioned this in T251150: Change base10 color definition from #222 to #202122.Apr 27 2020, 2:53 PM
scblr mentioned this in T251227: Change base10 color definition from #222 to #202122.Apr 28 2020, 8:54 AM
Volker_E moved this task from In Dev/Progress to Done on the Wikimedia Design Style Guide board.Apr 28 2020, 9:11 PM
gerritbot added a comment.Apr 29 2020, 4:22 PM

Change 593269 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[wikibase/vuejs-components@master] Update wikimedia-ui-base

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

gerritbot added a project: Patch-For-Review.Apr 29 2020, 4:22 PM
gerritbot added a comment.Apr 30 2020, 12:23 PM

Change 593269 merged by jenkins-bot:
[wikibase/vuejs-components@master] Update wikimedia-ui-base

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

Volker_E removed a project: Patch-For-Review.Jun 9 2020, 5:20 AM
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