1841988 - Insuficient general color contrast for the gray text inside the PiP's developer warning dialog

Status: NEW

(Toolkit :: Picture-in-Picture, defect)

Description

[Daniel Bodea [:danibodea]]

Attachment: general color contrast fail.png

Found in

• Beta v116.0b1

Affected versions

• Nightly v117.0a1
• Beta v116.0b1

Tested platforms

• Affected platforms: all
• Unaffected platforms: none

Steps to reproduce

1. Load https://codepen.io/niklasbaumgardner/pen/MWBjBeZ
2. Click the PiP button from the URL bar.
3. Observe the gray text with small font.

Expected result

• The text should have minimal contrast specific for small fonts.
• According to figma designs the font size is 11px with color #5B5B66.

Actual result

• The color contrast appears to be around 3:1 and the font size is very small.

Regression range

• Not a regression.

Additional notes

• The color contrast is hard to determine with the "Colour Contrast Analyser (CCA) due to its very small font, but it appears to be insufficient for both Light and Dark themes and also Alpenglow.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

:danibodea, if you think that's a regression, could you try to find a regression range using for example mozregression?

Comment 2

[Anna Yeddi [:ayeddi]]

Attachment: Nightly 126 deemphasized text

With the current Nightly 126 on macOS Sonoma 14.3.1 I was not able to reproduce the bug on both Dark and Light themes. I used this Wikimedia page with the video for testing.

It seems that the UX/Reusable Components/Themes teams' work on unifying and updating the common styles has resolved the issue here - the deemphasized text is now much more readable.

:Daniel, could you please confirm the fix too and, if it is resolved, close the bug?

Comment 3

[Daniel Bodea [:danibodea]]

I cannot see a difference in Nightly v126.0a1 compared to the older versions in both Windows 10 and MacOS 11. The text is too small and in a diffused gray color. The Color Contrast Analyser app shows that the color contrast is not enough for normal sized text (let alone small text) 90% of the time. The app CAN show that the contrast is enough if the user chooses to analyze the specific pixels that are darker (less than 10%). In this color, the text should be large in order for the general color contrast test to pass.

I should probably have to mention that I tested using a 1080p monitor, in case this affects the way the text is displayed. If there was a change to the color of this text, I deem it insufficient.