Page MenuHomePhabricator

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

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

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

ProjectBranchLines +/-Subject
wikibase/vuejs-componentsmaster+4 -4
mediawiki/extensions/Wikibasemaster+23 -60
wikimedia/portalsmaster+34 -15
mediawiki/extensions/Wikibasemaster+12 -10
mediawiki/extensions/UniversalLanguageSelectormaster+27 -33
mediawiki/extensions/MultimediaViewermaster+38 -29
mediawiki/coremaster+6 -6
mediawiki/extensions/WikibaseMediaInfomaster+1 -1
mediawiki/extensions/MachineVisionmaster+1 -1
mediawiki/extensions/3Dmaster+1 -1
mediawiki/extensions/Wikibasemaster+1 -1
mediawiki/extensions/Kartographermaster+41 -17
mediawiki/extensions/GuidedTourmaster+3 -3
mediawiki/extensions/ContentTranslationmaster+7 -7
mediawiki/extensions/Echomaster+19 -12
mediawiki/extensions/AdvancedSearchmaster+1 -1
mediawiki/extensions/JsonConfigmaster+22 -18
mediawiki/extensions/GettingStartedmaster+11 -11
mediawiki/coremaster+14 -14
mediawiki/skins/Vectormaster+5 -5
mediawiki/coremaster+562 -426
oojs/uimaster+12 -12
wikimedia-ui-basemaster+8 -8
Show related patches Customize query in gerrit

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

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

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.

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 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.
Volker_E updated the task description. (Show Details)Apr 10 2020, 5:15 AM
Volker_E updated the task description. (Show Details)

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

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

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

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

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

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

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

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

RHo added a subscriber: RHo.Apr 15 2020, 12:59 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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