Issue metadata
Sign in to add a comment
|
Current selected line highlight (Elements) became very non-contrast
Reported by
feelde...@gmail.com,
Jun 7 2018
|
||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36 Steps to reproduce the problem: 1. Open devtools 2. Open Elements tab 3. Select any line What is the expected behavior? Selected line initially had dark blue background and white text color. What went wrong? Now the background has very light blue color still having white text color, it became very hard to read contents of a selected line. Did this work before? Yes have no idea Chrome version: 67.0.3396.62 Channel: beta OS Version: Flash Version: Provide straightforward way of customizing these colors.
,
Jun 8 2018
Thanks for filing the issue! Tried checking the issue on reported chrome version 67.0.3396.62 using Ubuntu 14.04 with the below mentioned steps. 1. Launched chrome 2. Inspected the page -> elements 3. Clicked on a line We observed the text in white colour with dark blue background. Attaching the screen cast fro reference. @Reporter: Could you please have a look at the screen cast and let us know if we have missed anything. Any further inputs from your end may help us.
,
Jun 8 2018
Erm, yes :) Technically it's totally fine. I mean that before (in previous versions, the color of a background was much darker, it was the same color as used for debugger breakpoints. Maybe I am some sort of a color-blind (but never had problems with colors before). Generally current version of highlighting a selected line in "Elements" is too non-contrast, it is hard to read white text on a light-blue background.
,
Jun 8 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 11 2018
Re-checked the issue on reported version 67.0.3396.62 and on the previous version(s) M60 at debugger breakpoints using Ubuntu 14.04, we didn't observe any significant change of the background and text colour in all the versions. Hence removing the Needs-bisect label and requesting someone from Dev team to have a look into this. Thanks!
,
Jun 11 2018
,
Jun 12 2018
,
Sep 19
@hwi, could you look at the first screenshot and tell whether selection-vs-text contrast is within the standards or we need to adjust our selection color scheme in devtools?
,
Sep 20
Thanks for calling this out! The current contrast ratio is about 3.12 – https://contrast-ratio.com/#white-on-%232196F3 For the given font size, we should aim for above 4.5 (WCAG 2.0, AA). Here's a recommended color with 4.51 – https://contrast-ratio.com/#white-on-%232A71EA The attached image is the comparison on a few sample UIs that use the same color scheme. Please loop me in once this gets implemented, then we can fine-tune if necessary.
,
Sep 20
,
Dec 4
,
Dec 4
julialiang@ - fyi
,
Dec 5
Thanks for the screenshot, light theme lgtm. For dark theme, the current color is #2f84da / hsl(210, 70%, 52%), ratio is only 3.86: https://contrast-ratio.com/#white-on-%232f84da We could also aim for AA or better here. Perhaps hsl(210, 70%, 42%) ? (same hue/saturation, but less lightness) https://contrast-ratio.com/#white-on-hsl%28210%2C%2070%25%2C%2042%25%29 Screenshot: https://imgur.com/a/oQigjcA
,
Dec 5
c13 - SGTM. Thanks luoe@!
,
Dec 6
@hwi, can we settle at hsl(218, 78%, 60%) to keep DevTools not only accessible, but also pretty? I think the new color is a bit too aggressive given the subtle palette that DevTools uses. We are also trying to avoid blobs of intense colors when we are working with the text / source code. The new color is at 3.6-3.7 contrast ratio, which is on par with colors used in Google Calendar, gmail, etc.
,
Dec 6
Thanks pfeldman@ and luoe@. Here's the updated recommendation. - The required color contrast is minium 4.5 for the font size we use. - Dark theme uses a light gray for foreground text, so background needs to be darker that we've discussed so far (my bad that I initially assumed it to be white, which is incorrect/not ideal. It's #cdcdcd) - Also, as pfeldman@ suggested, the blue colors on both light theme and dark theme can be adjusted to be less bright, and additionally also felt similar. - Updated recommendation: Light theme: #1a72e0 or hsl(213, 79%, 49%) (contrast about 4.6 https://contrast-ratio.com/#white-on-%231a72e0) Dark theme: #184fa0 or hsl(216, 74%, 36%) (contrast about 4.9 https://contrast-ratio.com/#%23cdcdcd-on-%23184fa0) Comparison screenshot attached.
,
Dec 6
Side note for dark theme: - the change should only apply to the bgcolor for selected line highlights - the suggested blue should be always used with foreground text color #cdcdcd (dark text color wouldn't work on this blue bg)
,
Dec 22
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/6b6debfc317059bbe69de528507b9b397333a612 commit 6b6debfc317059bbe69de528507b9b397333a612 Author: Pavel Feldman <pfeldman@chromium.org> Date: Sat Dec 22 01:08:02 2018 DevTools: migrate to the light selection color to achieve 4.5+ contrast ratio. Bug: 850500 Change-Id: Iccf9ca5fe088aa09d46dc4dd3344be79f28013a8 Reviewed-on: https://chromium-review.googlesource.com/c/1388027 Commit-Queue: Pavel Feldman <pfeldman@chromium.org> Reviewed-by: Dmitry Gozman <dgozman@chromium.org> Cr-Commit-Position: refs/heads/master@{#618701} [modify] https://crrev.com/6b6debfc317059bbe69de528507b9b397333a612/third_party/blink/renderer/core/inspector/dev_tools_host.cc [modify] https://crrev.com/6b6debfc317059bbe69de528507b9b397333a612/third_party/blink/renderer/core/inspector/dev_tools_host.h [modify] https://crrev.com/6b6debfc317059bbe69de528507b9b397333a612/third_party/blink/renderer/core/inspector/dev_tools_host.idl [modify] https://crrev.com/6b6debfc317059bbe69de528507b9b397333a612/third_party/blink/renderer/devtools/front_end/devtools_compatibility.js [modify] https://crrev.com/6b6debfc317059bbe69de528507b9b397333a612/third_party/blink/renderer/devtools/front_end/elements/elementsTreeOutline.css [modify] https://crrev.com/6b6debfc317059bbe69de528507b9b397333a612/third_party/blink/renderer/devtools/front_end/host/InspectorFrontendHost.js [modify] https://crrev.com/6b6debfc317059bbe69de528507b9b397333a612/third_party/blink/renderer/devtools/front_end/host/InspectorFrontendHostAPI.js [modify] https://crrev.com/6b6debfc317059bbe69de528507b9b397333a612/third_party/blink/renderer/devtools/front_end/text_editor/CodeMirrorTextEditor.js [modify] https://crrev.com/6b6debfc317059bbe69de528507b9b397333a612/third_party/blink/renderer/devtools/front_end/text_editor/CodeMirrorUtils.js [modify] https://crrev.com/6b6debfc317059bbe69de528507b9b397333a612/third_party/blink/renderer/devtools/front_end/text_editor/cmdevtools.css [modify] https://crrev.com/6b6debfc317059bbe69de528507b9b397333a612/third_party/blink/renderer/devtools/front_end/ui/inspectorCommon.css [modify] https://crrev.com/6b6debfc317059bbe69de528507b9b397333a612/third_party/blink/renderer/devtools/front_end/ui/inspectorStyle.css [modify] https://crrev.com/6b6debfc317059bbe69de528507b9b397333a612/third_party/blink/renderer/devtools/front_end/ui/tabbedPane.css [modify] https://crrev.com/6b6debfc317059bbe69de528507b9b397333a612/third_party/blink/renderer/devtools/front_end/ui/toolbar.css
,
Jan 8
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/c4afae7755c91545afd726ad3d6865fd74fd7de9 commit c4afae7755c91545afd726ad3d6865fd74fd7de9 Author: Pavel Feldman <pfeldman@chromium.org> Date: Tue Jan 08 03:01:00 2019 DevTools: follow up to the selection color update: - don't force the icon colors on the tree outline with light selection. - use material colors for selection and buttons. Bug: 850500 Change-Id: Iaba73dfb6ac762b3d5b1c374e1f1e7e3664cf41d Reviewed-on: https://chromium-review.googlesource.com/c/1399567 Reviewed-by: Dmitry Gozman <dgozman@chromium.org> Commit-Queue: Pavel Feldman <pfeldman@chromium.org> Cr-Commit-Position: refs/heads/master@{#620592} [modify] https://crrev.com/c4afae7755c91545afd726ad3d6865fd74fd7de9/third_party/blink/renderer/devtools/front_end/elements/ElementsTreeOutline.js [modify] https://crrev.com/c4afae7755c91545afd726ad3d6865fd74fd7de9/third_party/blink/renderer/devtools/front_end/ui/inspectorCommon.css [modify] https://crrev.com/c4afae7755c91545afd726ad3d6865fd74fd7de9/third_party/blink/renderer/devtools/front_end/ui/inspectorStyle.css [modify] https://crrev.com/c4afae7755c91545afd726ad3d6865fd74fd7de9/third_party/blink/renderer/devtools/front_end/ui/textButton.css [modify] https://crrev.com/c4afae7755c91545afd726ad3d6865fd74fd7de9/third_party/blink/renderer/devtools/front_end/ui/treeoutline.js
,
Jan 16
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/4303dc173fc9f92911981f70a778aa1c791cb67b commit 4303dc173fc9f92911981f70a778aa1c791cb67b Author: Erik Luo <luoe@chromium.org> Date: Wed Jan 16 05:37:55 2019 DevTools: restore styles for UI controls - Font inherits again for button, input, select - Dark theme Elements tree gets blue focused selection color Screenshot: https://imgur.com/a/hRWeVWv Bug: 850500 Change-Id: Ia4baabbda7371b23dd2c327a6b5ea34fd6814cd5 Reviewed-on: https://chromium-review.googlesource.com/c/1405971 Reviewed-by: Joel Einbinder <einbinder@chromium.org> Commit-Queue: Erik Luo <luoe@chromium.org> Cr-Commit-Position: refs/heads/master@{#623121} [modify] https://crrev.com/4303dc173fc9f92911981f70a778aa1c791cb67b/third_party/blink/renderer/devtools/front_end/ui/inspectorCommon.css [modify] https://crrev.com/4303dc173fc9f92911981f70a778aa1c791cb67b/third_party/blink/renderer/devtools/front_end/ui/inspectorStyle.css [modify] https://crrev.com/4303dc173fc9f92911981f70a778aa1c791cb67b/third_party/blink/renderer/devtools/front_end/ui/textButton.css |
|||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||
Comment 1 by krajshree@chromium.org
, Jun 8 2018