2031368 - Make tab group colors easier to perceive and differentiate for colorblind, greyscale display users

Status: NEW

(Firefox :: Tabbed Browser: Tab Groups, defect, P3)

Description

[Stephen Thompson [:sthompson]]

:morgan noted:

this was flagged during the initial tab groups review and the a11y team advised adding patterns or icons to the colour chips to improve distinguishability (particularly for empty/blank groups)

Some users report that it's difficult to tell the tab group colors apart, particularly in the "create tab group"/"manage tab group" panel that includes all of the 9 tab group colors side by side for the user to select.

Comment 1

[Morgan Reschenberg [:morgan]]

To add additional context, this is specifically for colorblind users and users on greyscale displays. Our tab groups color values have many collisions, and there is no additional affordance to distinguish empty groups by sight (i.e. without interaction).

Comment 2

[Morgan Reschenberg [:morgan]]

Attachment: tabgroups colors simulated

Comment 3

[Jules Simplicio [:jules]]

A few thoughts on using groups of colors to color code... Not sure how we can improve this at the color palette level btw because colors are next to each other in the spectrum. Pink + red will always look close to each other, so can orange + red, cyan + green, etc. It's a give and take with colors. If we make orange more red so that is not as yellow, then it gets closer to red. Such nuances tend to depend on peoples eyes too. Since tab groups don't come with iconography, I'm not sure how else to differentiate color families that are next to each other.

Comment 4

[Jules Simplicio [:jules]]

Stephen, correct me if I'm wrong but I think tab groups team has tried to prioritze a color picker so people can potentially have more nuance although tab group is tied to an API right now that has a specific set of colors https://developer.chrome.com/docs/extensions/reference/api/tabGroups, and that seems to be what our users are upset about because we lack customization

Comment 5

[Stephen Thompson [:sthompson]]

Amy Lee produced mocks during the Nova design sprints for allowing users to select a custom color and/or select an icon to appear on their tab groups in addition to the color and name. https://www.figma.com/design/tmxse5vWRAPeQoUXiaEJwZ/Design-Sprint-1-x-Assembly-File?node-id=4101-85439&t=Knc04RgK75XWysEd-0 These ideas were previously considered to come late in Nova, but we're now just doing one major Nova release that doesn't include those features. I also don't see these features on our Core-X roadmap for 2026. When Amy is back in May, maybe we can come up with some ideas for non-color ways to differentiate groups.