New issue
Advanced search Search tips

Issue 883451 link

Starred by 10 users

Issue metadata

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



Sign in to add a comment

Omnibox dropdown and menu selections' contrast are too low

Project Member Reported by pkasting@chromium.org, Sep 12

Issue description

In a non-incognito window, on my Win 10 box:

Omnibox dropdown, background: #ffffff
Omnibox dropdown, selected item: #f2f2f2 (contrast ratio 1.11)
Omnibox dropdown, hovered item: #eeeeee (contrast ratio 1.16)
Omnibox dropdown, hovered + selected item: #e0e0e0 (contrast ratio 1.32)
Chrome menu, background: #ffffff
Chrome menu, hovered/selected item: #ebebeb (contrast ratio 1.19)

There are several problems here:
* All these contrast levels are very low -- they're hard for me to see with good vision, and they wash out entirely in the presence of screen glare.  External users have complained.
* The omnibox and menus are similar but not identical.  We probably want them identical.  However, the concept of "selection vs. hover" is maybe immaterial in menus, so perhaps there's only a "selected" case there.
* Mouse hover is less important than selection (witness which one we use to set the text in the omnibox), but has higher contrast.

For reference, Windows' default selection color for these sorts of cases is #0078d7 (contrast ratio 4.49).  We also use this selection color in the omnibox for selected text, so having the dropdown not match is unusual.

Possible solutions:

(1) Previous versions of Chrome:
* Use the system selection color for selected items, whether or not they're hovered
* Use the system selection color with 0.5 alpha for hovered, non-selected items

(2) Google greys:
* Use grey 600 for hover (contrast ratio 3.68), grey 700 for selection (contrast ratio 6.04)

(3) Auto-computed contrast:
* For selection, use the background color, blended toward either grey 900 or the system selection color until hitting a contrast ratio 0f 4.5.  (Would result in something like a "grey 650" if using grey).
* For hover, do something similar but pick a lower number.
 
Cc: bklmn@chromium.org bettes@chromium.org
Owner: markchang@chromium.org
Status: Assigned (was: Untriaged)
Labels: -Proj-MdRefresh Proj-DesktopUI
Labels: Group-Omnibox
Labels: Hotlist-DesktopUITriaged
In the Win 10 file explorer, hovered items are #e5f3ff (ratio 1.12), selected items are #cce8ff (ratio 1.26) with a border of #89caff (ratio 1.75).

Using those as a rough guide, solution idea 4:
* Hovered item grey 100 (ratio 1.11)
* Selected item grey 300 (ratio 1.37)
* For incognito windows blend away from the background color so as to hit those same ratios
Owner: pkasting@chromium.org
Status: Started (was: Assigned)
Huh, actually this is close to what the spec says to do ( https://docs.google.com/presentation/d/1EO7TOpIMJ7QHjaTVw9St-q6naKwtXX2TwzMirG5EsKY/edit#slide=id.g3232c09376_6_915 ); I don't know why we didn't implement that.

I'm going to just implement the spec here.

Sign in to add a comment