Page MenuHomePhabricator

Dark mode feed bottom navigation active icon has insufficient contrast with toolbar color
Closed, ResolvedPublic1 Estimated Story Points

Description

Steps to reproduce

Open the feed.

Expected results

Active icon color should have sufficient color contrast with the app bar background. Per spec using white when the bottom navigation is colored.
That is, in dark mode, the bottom navigation nav items should be rendered in white at opacity 100% for active items, 70% for inactive items.

For reference, it is similar to the G+ style:

screenshot-2016-09-23-10-47-25-356495855.png (2×1 px, 1 MB)

Actual results

screenshot-2016-09-22-09-51-34-941244498.png (2×1 px, 604 KB)

Active icon is using the #36c blue accent color on a #222 colored bar, which is insufficient color contrast.

Environments observed

App version: 27afd2964fbf29b6108c8d5dec03002ccb95c84f
Android OS versions: API 24
Device model: Nexus 6P
Device language: English

Event Timeline

Are you talking about the buttons at the bottom tab bar?

Niedzielski renamed this task from [BUG] Dark mode feed button contrast looks odd to [BUG] Dark mode feed nav button contrast looks odd.Sep 23 2016, 5:15 PM

That's right.

Niedzielski renamed this task from [BUG] Dark mode feed nav button contrast looks odd to Dark mode feed nav button contrast looks odd.Nov 9 2016, 7:59 PM
Niedzielski triaged this task as Low priority.
RHo renamed this task from Dark mode feed nav button contrast looks odd to Dark mode feed bottom navigation active icon has insufficient contrast with toolbar color.Nov 14 2016, 5:00 PM
RHo updated the task description. (Show Details)
RHo subscribed.

Per task description for 'Expected', the bottom navigation nav items should be rendered in white (at opacity 100% for active items, 70% for inactive items) in Dark mode.

so basically in simple words , the bottom navigation menu icons( when selected ) then white , menu icons( non selected ) then grey. and both of the cases navigation menu background will be like the one which is in "expected" result irrespective of the colorAccent color ?

Hi @Ankit.kumar – I just updated the description to clarify. In dark mode the bottom navigation active menu item is in white (#FFF), with the active menu item at opacity 100%, and inactive icons opacity 70% (not grey). And there is no change to the background color of the bottom navigation.

this has to be like only in API>=23 (as the dark mode is in after API 22), am i right ?

Change 364780 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Update bottom nav tabs for dark mode.

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

Change 364780 merged by jenkins-bot:
[apps/android/wikipedia@master] Update bottom nav tabs for dark mode.

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

hi @Dbrant - sorry I should have updated this - but per new mocks for dark mode noted in T95080, can we update the dark mode bottom nav background color #43464A ?

Expected: see Zeplin https://zpl.io/Z9l1XW
Actual:

image.png (1×1 px, 682 KB)