New issue
Advanced search Search tips

Issue 854738 link

Starred by 4 users

Issue metadata

Status: Started
Owner:
Cc:
Components:
EstimatedDays: 1
NextAction: ----
OS: Linux , Windows , Chrome , Mac
Pri: 2
Type: Bug

Blocking:
issue 820495
issue 822061



Sign in to add a comment

Hovered tab titles difficult to read with dark frames

Project Member Reported by pkasting@chromium.org, Jun 20 2018

Issue description

If the window frame is dark enough to use light text for background tab titles, that text becomes very difficult to read when tabs are hovered.  Attached is a screenshot of current Dev on my system at home.  This will become worse when the fix for  bug 848415  ships, since it makes hovered tabs more like active tabs.

I think hovered tabs should use the same text color as active tabs (because hovered tabs should look more like active than inactive tabs in all cases due to the patch on the above bug).  This still won't be perfect, but it should at least be better.
 
hovered.png
6.1 KB View Download
EstimatedDays: 1
Cc: pkasting@chromium.org
Owner: bettes@chromium.org
Status: Assigned (was: Untriaged)
bettes@ input please. switching to active tab color text seems jarring to me.
It may very well look jarring (though without seeing it in action it seems hard to make that determination), but tab titles have to stay readable; basic usability trumps aesthetics :).  If we deem changing the text color unacceptable, we'd need to find a different way to indicate the hovered tab that won't reduce contrast, e.g. outlining it.  I suspect we don't have wish to experiment with more significant design and implementation changes like that right now.
Friendly ping, bettes@
Blocking: 856893
I don't have a great answer for this at the moment. The only thing I can think of right now is to make the opacity lighter (per  bug 856893 ) and/or special cased for dark themes. 

pkasting@ was the original reporter of  bug 848415  so I need to understand what the impetus was for making the change. If it's about a11y, I think we jumped the gun too early because tab hovers were a "P2, non-blocking but would be good to fix"

https://docs.google.com/document/d/1RpmaIPEJJcO2hUaSo5YHyABKk22HvktfXdxfR82xzNs/edit





Note that while  bug 856893  proposes scaling back  bug 848415 , even a complete reversal of  bug 848415  would not solve (or, really, very strongly affect) the problem here -- the screenshot in comment 0 was taken pre-that-change and isn't readable as-is.  So while we can discuss that change, I think it's actually a distraction from solving this.

Special-casing for dark themes also doesn't help; the screenshot above is unthemed (it's just Win 10 with a title bar color).

There are only a couple routes forward here I can see:
1) Use the active text color for hovered tabs
2) Remove the radial gradient under the mouse pointer and scale back hovered opacity to be nearly invisible
3) Like route (2), except go even further and change hover indication to be done in some other way, e.g. drawing a horizontal line of some color at the top or bottom of the tab in question.

Out of those choices, (1) seemed like the least large-and-potentially-problematic from a design perspective.
Blocking: -856893
Page titles are now full opaque white, which is different from the screenshot in #1. If that's the expected design, then I'd vote for #2.

I've made some radial and hover explorations based off an approximation of what I see in Canary. 

I recommend a 20% base if we're going to special case hovered opacities for custom title bars. 

https://gallery.googleplex.com/projects/MCHbtQVoQ2HCZW9TjXpqhOa9/files/MCFBUdYrwbJ9FPJZ7d0aHYQg


Note that  bug 856893  suggests scaling back hovered opacities for all situations, removing the need to special case. 
Labels: Group-New_Tab_Button
Labels: -Group-New_Tab_Button Group-Tabstrip
Labels: -Pri-2 Pri-3
Downgrading to P3 since it's not clear what can change now about it.
Labels: -Pri-3 Pri-1
Upgrading for assessment.
What should our response be here?
IMO: We implement  bug 856893  and then also maybe plug the computed "hovered background color" into Bret's new "ensure minimum contrast" function so it will shift the text just enough to still be readable as needed when you hover.  That's a much less drastic change than anything on comment 7.
Labels: M-69 Target-69
Labels: -Group-Tabstrip -Pri-1 Group-Tab Pri-2
I think we might still need to make a small tweak here as described in comment 15 -- if the pre-hover state just barely meets minimum contrast specs, the hovered state won't.
Labels: -M-69 -Target-69 M-71 Target-71
Labels: -Proj-MdRefresh Proj-DesktopUI
Labels: Hotlist-DesktopUITriaged
Labels: -M-71 -Target-71 M-73 Target-73
Cc: -pkasting@chromium.org
Owner: pkasting@chromium.org
Status: Started (was: Assigned)

Sign in to add a comment