[A11y Assessment - NTP] Hint text low contrast |
|||||||||||||||||
Issue descriptionChrome 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
,
Feb 28 2017
,
Mar 7 2017
,
Mar 27 2017
,
Apr 21 2017
,
Jul 7 2017
,
Aug 31 2017
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
,
Sep 1 2017
,
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?
,
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!
,
Nov 6 2017
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?
,
Nov 6 2017
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.
,
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
,
Nov 11 2017
Related note: <input> tag placeholder text color is #757575 on white in Blink (web engine): crbug.com/397260#c23 (fixed)
,
Nov 29 2017
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?
,
Nov 29 2017
,
Dec 14 2017
,
Dec 15 2017
,
Dec 15 2017
,
Dec 15 2017
,
Jan 11 2018
Ping @ hwi and maxwalker
,
Jan 11 2018
Issue 481559 has been merged into this issue.
,
Jan 11 2018
,
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?
,
Jan 12 2018
Sure, that's easy enough to do :)
,
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
,
Jan 12 2018
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 |
|||||||||||||||||
Comment 1 by hwi@chromium.org
, Feb 26 2017