1960968 - [Bookmarks Evolution] Selected state checkmark and header text and icon buttons have low color contrast

Status: RESOLVED FIXED

(Firefox for Android :: Bookmarks, defect)

Description

[Anna Yeddi [:ayeddi]]

Attachment: items in question are higlighted on a selected view for Bookmarks and the Colour Contrast Analyzer is shown failing the (text) Contrast

Steps to reproduce

1. Open Firefox and navigate to the Settings > Bookmarks menu
2. Select a directory or a bookmark by a long-tap on it
3. Observe the visual appearance of the selection mode on Bookmarks

Expected behavior

1. All essential parts of UI (all text and each meaningful image like an icon for an image button) are readable and easy to discern.

Actual behavior

1. access-S2 item: X Selected text in the selected header - 3.11:1 color contrast for the white on purple is not sufficient, 4.5:1 or higher is expected.
2. access-S4 items: Image buttons like a checkmark next to the selected item, and selected header's Back, Edit, Move, More options have color contrast that is WCAG-compliant (3.11:1 while 3:1 is the minimum requirement by the WCAG 2.2 for an essential graphics) but it is hard to discern.
3. Note: Similar issue is reported in bug 1883627. In both cases there is some text (X selected) involved, thus a text contrast is required to be 4.5:1 or more in color contrast for readability in WCAG 2.x. But it would improve the experience for the non-text essential graphics (like icon buttons) as well:
   1. Foreground: #FFFFFF
   2. Background: #AB71FF
   3. The contrast ratio is: 3.2:1 (3.11:1)
   4. 1.4.3 Contrast (Minimum) (AA)- Fail for regular text
   5. 1.4.11 Non-text Contrast (AA) - Pass for UI components and graphical objects (passing at 3:1 which is very close to the current color combination)
4. Remediation note: using the same darker purple shade #7541E5 as is used in the Search button would provide sufficient for WCAG compliance color contrast of 5.8:1 for both text and graphics.

Device information

• Firefox version: Firefox Nightly 139.0a1 (build #2016084991)
• Android device model: Samsung Galaxy A54 5G
• Android OS version: 14

Any additional information?

refer to the notes in the Actual behavior above

Comment 1

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

The severity field for this bug is set to S3. However, the accessibility severity is higher, .
:boek, could you consider increasing the severity?

For more information, please visit BugBot documentation.

Comment 2

[Matt Tighe [:matt-tighe]]

Refer to Figma for mobile color styles. These are accessed in Fenix through FirefoxTheme. This uses AcornTheme under the hood, which can also be used if ever writing code in A-C. When in doubt, #firefox-mobile-eng-ux and #mobile-android-team can be good resources to ask.

Comment 3

[Segun Famisa [:segun]]

It seems that this may be a design-system-level fix, so I have mentioned this in #firefox-mobile-eng-ux and asked for some guidance on what to do.

Comment 4

[Faisal Masalha]

Attachment: Bug 1960968 - Improve bookmarks selected state checkmark, header text, and icon buttons color contrast

Comment 5

[cwong]

Hi team,

I took a look into this and it looks like if we remap the colors to M3 tokens, we can resolve this! :)
We would need to make a few modifications to: page background, top app bar default state, top app bar selected state, text/icons default state, and text/icons selected state.

The changes are the following:

Element	Current	Remap
Page background	layer1	Surface
Default: Top app bar	layer1	Surface
Default: Text & icons	Text (textPrimary), Icons (iconPrimary)	On Surface
Selected: Top app bar	layerAccent	Primary
Selected: Text & icons	textInverted	Inverse on Surface

Here is a reference to the M3 color mapping:
https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?m=auto&node-id=64745-6578&t=vye0HL84LXTUAYLb-1

and a reference to the design:
https://www.figma.com/design/n6pHx1rvt7iTMPzby250gL/M3-redesign-references?node-id=31-5676&t=atD1MW4RXK2CXMxp-1

Let me know if you have any questions, thanks!

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/77d42e64fbe0
https://hg.mozilla.org/integration/autoland/rev/78d51fafd4db
Improve bookmarks selected state checkmark, header text, and icon buttons color contrast r=android-reviewers,007

Comment 7

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/78d51fafd4db