1813449 - [a11y] Consider increasing the contrast ratio on "+" button from Tabs Tray

Status: NEW

(Firefox for Android :: Tabs, enhancement)

Description

[Chris Peterson [:cpeterson]]

From github: https://github.com/mozilla-mobile/fenix/issues/27310.

Steps to reproduce

1. Have the Accessibility scanner app installed and opened.
2. Go to Home Page - Tap the tab counter
3. Scan the opened Tabs Tray.

Expected behaviour

No suggestions are made.

Actual behaviour

Text contrast
org.mozilla.fenix:id/new_tab_button
The item's text contrast ratio is 2.47. This ratio is based on an estimated foreground color of #7542E5 and an estimated background color of #2B2A33. Consider using colors that result in a contrast ratio greater than 4.50 for small text, or 3.00 for large text.

Device name

Google Pixel 6

Android version

Android 13

Firefox release type

Firefox Nightly

Firefox version

107.0a1

Device logs

No response

Additional information

┆Issue is synchronized with this Jira Task

Change performed by the Move to Bugzilla add-on.

Comment 1

[BMO Automation]

Attachment: [mozilla-mobile/firefox-android] Bug 1813449 - Fix accessibility issues on Tabs Tray screen (#1007)

Comment 2

[Petru-Mugurel Lingurar [:petru]]

A patch landed to improve a11y by adding a content description label to the tray handle.
The contrast issues will remain to be further investigated and later fixed.

Comment 3

[Anna Yeddi [:ayeddi]]

To clarify (per the screenshot in the GitHub bug): the app picked up low color contrast for the background of the button (purple) against the page background (dark navy) - it could prevent a user from being able to discern the button from the static page. But the minimum color contrast is expected to be 3:1 per WCAG 2.1 Success Criterion 1.4.11 (linked below), instead of 4.5:1. That's being said, the higher the contrast, the easier it is to see the control for a user with low vision, with color deficiency, or a user with a glare on their screen.

More about accessible color contrast, its user impact, and tools to be used to measure it on the WCAG 2.1 Success Criterion 1.4.3 Contrast (Minimum) Understanding page and about color contrast for active UI in the SC 1.4.11 Non-text Contrast