New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 696259 link

Starred by 3 users

Issue metadata

Status: Fixed
Owner:
Closed: Jan 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Chrome , Mac
Pri: 2
Type: Bug
ntp
Team-Accessibility



Sign in to add a comment

[A11y Assessment - NTP] Hint text low contrast

Project Member Reported by hwi@chromium.org, Feb 26 2017

Issue description

Chrome Version:  56.0.2924.87
OS: Mac,Windows,Linux,CrOS

What steps will reproduce the problem?
(1) Inspect the text color of "Search Google or type URL"
(2) Check contrast http://leaverou.github.io/contrast-ratio/#%23bbb-on-white

What is the expected result?

Min contrast ratio 4.5:1
Recommended color value: #757575 or rgba(0,0,0,0.54)

What happens instead?

1.9:1



 

Comment 1 by hwi@chromium.org, Feb 26 2017

Summary: [A11y Assessment - NTP] Hint text low contrast (was: [A11y Assessment - NTP] )

Comment 2 by treib@chromium.org, Feb 28 2017

Components: UI>Browser>NewTabPage
Labels: NewComponent-Accessibility-Browser
Labels: NewComponent-Accessibility
Labels: -newcomponent-accessibility-browser -newcomponent-accessibility

Comment 6 by treib@chromium.org, Jul 7 2017

Cc: maxwalker@chromium.org treib@chromium.org
62.0.3200.0 (Official Build) canary (64-bit) (cohort: 64-Bit)
Windows 10 14393.1593

I was able to reproduce this on a new tab page, examining the "search Google or type URL" text. 

Foreground:#A1A4A7
Background:#FFFFFF

The contrast ratio is: 2.5:1

Please see this screenshot to examine contrast: https://screenshot.googleplex.com/i7T95skmPgZ.png

Thanks,

Laura 
Status: Available (was: Untriaged)

Comment 9 by treib@chromium.org, Nov 3 2017

The foreground color is now rgba(0, 0, 0, 0.38), which should make the contrast a little better (though still not 4.5:1).
That said, this is a "hint text", which is supposed to be shown grayed out. Are there any guidelines about hint texts and a11y? Are they just to be avoided completely?

Comment 10 by hwi@chromium.org, Nov 3 2017

The spec for hint text is to have 4.5:1. 

Internal references:
- "Text field state" in the md spec (go/li696259)
- "Hint text in textfields" in go/li696259mc

Thanks!
I've attached pictures of the current state (0.38) and the proposed new state (0.54). IMO the darker text looks a bit out of place there... hint texts just don't play very well with a11y :-/

Max, WDYT?
ntp_hint_before_038.png
49.2 KB View Download
ntp_hint_after_054.png
49.5 KB View Download
Given that the placeholder text is not communicating crucial information, that the omnibox is focused by default (replacing the search box's functionality) and Marc's comment, I'd suggest to address this issue in upcoming NTP design iterations if that sounds acceptable to everyone.

Comment 13 by hwi@chromium.org, Nov 7 2017

re: c11 and c12 
- tweaking the font size of the hint text to a smaller size, e.g. 13pt, while increasing the contrast to .54 black seems another we could try to address 'out of place' effect
- also thanks for noting the issue for the upcoming design

Comment 14 by hwi@chromium.org, Nov 11 2017

Related note: 
<input> tag placeholder text color is #757575 on white in Blink (web engine): 
 crbug.com/397260#c23  (fixed)

Comment 15 by treib@chromium.org, Nov 29 2017

Labels: -Pri-3 Pri-2
To me, decreasing the font size to 13pt makes it look even weirder.

hwi and/or maxwalker, how do we move forward here? Given that the big redesign is still at least a quarter out (probably more like 2-3), can we agree on something in the meantime?

Comment 16 by treib@chromium.org, Nov 29 2017

Labels: Needs-Feedback
Labels: win-a11y
Labels: contrast
Labels: contrast
Labels: ntp

Comment 21 by treib@chromium.org, Jan 11 2018

Ping @ hwi and maxwalker

Comment 22 by treib@chromium.org, Jan 11 2018

Cc: bettes@chromium.org sgabr...@chromium.org rachelis@chromium.org
 Issue 481559  has been merged into this issue.

Comment 23 by treib@chromium.org, Jan 11 2018

Labels: ntp-starter-bug

Comment 24 by hwi@chromium.org, Jan 11 2018

We have this https://buganizer.corp.google.com/issues/63253608 (Thanks maxwalker@), however, per go/li696259mc, "Hint text is never disabled text." Also, in the context of this bug, this hint/placeholder element is not disabled text, and the field is not in disabled state.

For now, given the potential confusion from darker and large font placeholder (for example, too prominent visually, and it might look like something is typed already), how about we move forward with 42% (Contrast 3:1) and keep seeking out for better alternative to communicate the message?

Comment 25 by treib@chromium.org, Jan 12 2018

Labels: -Needs-Feedback
Owner: treib@chromium.org
Status: Started (was: Available)
Sure, that's easy enough to do :)
Project Member

Comment 26 by bugdroid1@chromium.org, Jan 12 2018

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/40378a280cc8a76edde8d21fd965722b66dbdf9e

commit 40378a280cc8a76edde8d21fd965722b66dbdf9e
Author: Marc Treib <treib@chromium.org>
Date: Fri Jan 12 15:31:51 2018

Local NTP: Change fakebox text from 38% to 42% black

This pushes it over the required 3:1 contrast ratio.

Bug:  696259 
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Iaee6562081cf2c95af881b2a3931eafcf3013698
Reviewed-on: https://chromium-review.googlesource.com/863627
Reviewed-by: Friedrich Horschig <fhorschig@chromium.org>
Commit-Queue: Marc Treib <treib@chromium.org>
Cr-Commit-Position: refs/heads/master@{#528949}
[modify] https://crrev.com/40378a280cc8a76edde8d21fd965722b66dbdf9e/chrome/browser/resources/local_ntp/local_ntp.css

Comment 27 by treib@chromium.org, Jan 12 2018

Status: Fixed (was: Started)
The fixes have landed for both the local and the remote NTP. The remote NTP change should be live in a week or so, and the local NTP change will roll out with M65.

Sign in to add a comment