1520522 - [meta] Gray text is too light in doorhangers (fails contrast check)

Status: RESOLVED FIXED

(Firefox :: Theme, defect, P2)

Description

[Stephen Horlander [:shorlander]]

Attachment: Gray Text in the Control Panel

On Nightly gray text in doorhangers is too light and fails a contrast check (https://contrast-ratio.com/#%23d8d8d8-on-%23ffffff)

You can see this in the Control Center, Library "Recent Highlights" header, or the Application Menu with Keyboard shortcut text.

Comment 1

[Johann Hofmann [:johannh]]

Dão, can you point this to the regressing bug? Thanks!

Comment 2

[Dão Gottwald [:dao]]

graytext is supposed to be used for disabled UI elements, where the lower contrast might be acceptable. The way we use graytext in the Control Center (and other menus) isn't quite in line with that. Given that graytext was wrongly rendered as black on macOS 10.14 until recently and from what I know nobody complained about that text in the Control Center being black, can we scale back on the use of graytext?

Comment 3

[Stephen Horlander [:shorlander]]

(In reply to Dão Gottwald [::dao] from comment #2)

graytext is supposed to be used for disabled UI elements, where the lower contrast might be acceptable. The way we use graytext in the Control Center (and other menus) isn't quite in line with that. Given that graytext was wrongly rendered as black on macOS 10.14 until recently and from what I know nobody complained about that text in the Control Center being black, can we scale back on the use of graytext?

I agree that the Control Center text and the keyboard shortcut text should be black (or primary color in the case of dark themes).

There are cases where we are using slightly de-emphasized text to convey status or details. For example: the download status, or content blocking status (Standard, Blocking Tracking Cookies, etc.)

The download status seems to not be affect by this issue. I think it's using opacity and not the graytext keyword?

Comment 4

[Dão Gottwald [:dao]]

(In reply to Stephen Horlander [:shorlander] from comment #3)

The download status seems to not be affect by this issue. I think it's using opacity and not the graytext keyword?

Yes: https://searchfox.org/mozilla-central/rev/bee8cf15c901b9f4b0c074c9977da4bbebc506e3/browser/themes/shared/downloads/downloads.inc.css#136

Note that this is somewhat suboptimal in high-contrast settings.

Comment 5

[Justin Dolske [:Dolske]]

Given that this is a late-breaking theme discovery and we're days from release, I don't see this being fixed for 65.

Comment 6

[Ryan VanderMeulen [:RyanVM]]

No need to track this since it's not on anybody's radar to fix. Leaving it set to fix-optional as a possible dot release ride-along if the fix ends up being simple.

Comment 7

[Dão Gottwald [:dao]]

Stephen, now that the bugs blocking this one are fixed, are you happy with the current state? There's still some GrayText used in the identity popup for text that isn't strictly disabled. I think the problem there is that we don't have good ideas how else to de-emphasize that text.

Comment 8

[Stephen Horlander [:shorlander]]

(In reply to Dão Gottwald [::dao] from comment #7)

Stephen, now that the bugs blocking this one are fixed, are you happy with the current state? There's still some GrayText used in the identity popup for text that isn't strictly disabled. I think the problem there is that we don't have good ideas how else to de-emphasize that text.

The section header text, and panel keyboard shortcuts look good. Thank you!

The keyboard shortcuts in the Bookmarks menu are still grey.

I've asked Bryan to look at the Control Center.

Comment 9

[Dão Gottwald [:dao]]

(In reply to Stephen Horlander [:shorlander] (If you're waiting on a response please ping me on Slack or IRC) from comment #8)

The section header text, and panel keyboard shortcuts look good. Thank you!

By section header you mean "Recent Highlights" and friends? They're still using graytext, afaik...

Comment 10

[Stephen Horlander [:shorlander]]

(In reply to Dão Gottwald [::dao] from comment #9)

(In reply to Stephen Horlander [:shorlander] (If you're waiting on a response please ping me on Slack or IRC) from comment #8)

The section header text, and panel keyboard shortcuts look good. Thank you!

By section header you mean "Recent Highlights" and friends? They're still using graytext, afaik...

Yes… weird, they look better than last time I checked.