1891258 - [a11y] In Fenix's "Save password?" prompt, buttons are hard to see due to poor contrast (dark-text-on-dark-background), when Fenix is using dark theme

Status: RESOLVED FIXED

(Fenix :: Logins, defect)

Description

[Daniel Holbert [:dholbert]]

Steps to reproduce

1. Be using Firefox in "Dark Mode" (in my case, the default "follow system theme" with dark system theme in Android settings)
2. Visit some login page, e.g. https://m.wiki.mozilla.org/index.php?title=Special:UserLogin
3. Type in any username/password (e.g. abc / abc) and submit the login form
4. Look at the buttons near the bottom of Fenix's "Save password?" dialog that appears.

Expected behavior

Good contrast for text against the background.
(Text should probably be white, to match the look of the similar-looking install-extension confirmation dialog.)

Actual behavior

Text is dark-on-dark (one of the buttons is dark-purple-on-dark-gray, the other is dark-gray-on-dark-purple). See screenshot, coming up in next comment.

Device information

• Firefox version: 126.0a1 2024-04-11
• Android device model: Pixel 8
• Android OS version: 14

Any additional information?

As noted above, this seems pretty clearly like a mistake, since we have other UI that looks nearly-identical which uses white text which makes things much more readable.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot of bug (Bad contrast on "Never save | Save" buttons)

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: reference screenshot of different dialog with similar buttons & better contrast

Comment 3

[Daniel Holbert [:dholbert]]

From the "screenshot of bug", here are contrast checker links for:

• purple text on dark background (Never save button): 3.43:1
  https://webaim.org/resources/contrastchecker/?fcolor=905AFF&bcolor=2B2A33
• dark text on purple background (Save button): 3.39:1
  https://webaim.org/resources/contrastchecker/?fcolor=2D2A38&bcolor=905AFF

From the "reference screenshot", here are contrast checker links for:

• white text on dark background (Cancel button): 13.6:1
  https://webaim.org/resources/contrastchecker/?fcolor=FAFAFD&bcolor=2B2A33
• white text on purple background (Add button): 3.95:1
  https://webaim.org/resources/contrastchecker/?fcolor=FAFAFD&bcolor=905AFF

(Note that the WebAIM contrast-checker page still rates the improved white-on-purple as "fail" for certain categories, but it's at least a step in the right direction (3.95 rather than 3.39) and it's a 'pass' for "large text" which this might qualify as.)

(Also note, the foreground color hex-codes that I'm using here might not quite match the colors we're actually using, due to antialiasing effects; I'm using an eyedropper tool to pick a pixel as far away from a letter-edge as possible, but most of the pixels have some small amount of antialiasing-related variability.)

Comment 4

[Anna Yeddi [:ayeddi]]

Triaging this bug as access-S2, according to the Accessibility Triage Guidelines. The insufficient color contrast for both the purple+black and purple+white color combinations (on both attached screenshots), makes the text is hard to read for multiple groups of users, especially since it is used in the mobile app, where screen glare and direct sunlight could happen more often - these conditions would make any user's ability discern the label text even lower.

Color contrast of at least 4.5:1 is expected for the text of this size

Comment 5

[Daniel Holbert [:dholbert]]

(In reply to Anna Yeddi [:ayeddi] from comment #4)

Triaging this bug as access-S2, according to the Accessibility Triage Guidelines. The insufficient color contrast for both the purple+black and purple+white color combinations (on both attached screenshots)

I would suggest that we focus this bug here narrowly on the worst offender here, which is the dark-purple-and-black color combination shown in the first screenshot, which seems to be a one-off simple mistake in this one dialog. Aligning that instance with the purple+white styling we use elsewhere in the app (even if that's not perfect) would at least be a nice incremental improvement and would increase contrast + consistency.

After we fix that targeted issue, we can look separately at the purple+white contrast in our UI throughout the app, either in bug 1876723 (which seems to be about another instance of that very color combination) or another followup bug, and perhaps fix that color pairing across-the-board in the various bits of UI that use it.

Comment 6

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

The severity field is not set for this bug.
:bclark, could you have a look please?

For more information, please visit BugBot documentation.

Comment 7

[Daniel Holbert [:dholbert]]

Maybe the intent here is that we should be using a much lighter purple color? (which would make the dark color more sensible)

This bug is about dark text on a dark-purple button; I just filed bug 1904977 about a related issue with white text on a light-purple button.

Perhaps both of these bits of UI should be using dark text on a light-purple button?

Comment 8

[Alexandra Virvara]

Attachment: Bug 1891258: The cancel buttons on Save login and Password generator dialogs should not have poor contrast (text/background) when using dark theme

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e12f7f01e3dc
The cancel buttons on Save login and Password generator dialogs should not have poor contrast (text/background) when using dark theme r=android-reviewers,kaya

Comment 10

[tszentpeteri]

https://hg.mozilla.org/mozilla-central/rev/e12f7f01e3dc