Skip to Main Content

Provide A Higher Contrast Default Theme (or Themes)

by

Alex M | 7 months ago | in Customizing, extensions and themes

Mozilla reviewing

The new UI design in Firefox 89 reduces contrast a lot and makes it difficult to tell the edges of some UI elements, including tabs, some buttons, and entries in some menus.

When interacting with Firefox, I would like higher contrast interface elements so I can quickly and more easily identify those elements.

edited on Jun 2, 2021 by Asa Dotzler

You will need to login to post a comment

Asa Dotzler 7 months ago

I have changed the wording on your submission some and promoted it to the community.

RCG 1337 4 months ago

Why do you feel the need to censor feedback? For example anything criticizing Proton, which has been received mostly negatively everywhere else, isn't up for discussion. I tried to submit an "idea" to give your users the OPTION to disable it and opt out future UI redesigns. It was deleted and I wasn't even given the opportunity to talk to a moderator about ways to make it more constructive.

While I have you here, I just want to let you know that forced change does nothing but alienate your user base, which isn't productive when so many people are jumping ship. Especially if the solution is as simple as a toggle between old and new.

Also, why did you remove the workaround that let us disable Proton?

Max Girouard 7 months ago

I like to have many tabs open at once. as you can see, they just mush together. they could at least alternate in color to make them stand out!

Elia Tarasoff 7 months ago

I think there might be a bug here; I've been experimenting with the official themes plugin, to try and change the colors to something with better contrast, and there's specifically a color for a separator between tabs. This color setting doesn't actually do anything - I've changed it from bright red to purple and back, and nothing visible changes, whereas other theme color changes have an immediate effect in the UI. Background tabs still have a visual separation when you're hovering over one of them, but that doesn't help you quickly move between tabs. :)

Francis Fake 7 months ago

I agree. I've found the same thing.

Dmitrii Frolov 7 months ago

I think they just removed it (because favicon is a good indicator too), and Firefox Color doesn't know about it yet.

Stephanie ZR 7 months ago

I very much agree with you. I find the current interface so much more difficult to use - I didn't even realize I had multiple tabs open for quite a while. For people with visual acuity issues (like myself), this is a nightmare.

Laurie Higgins 7 months ago

Please provide more contrast. There are people who use the internet (and, therefore, Firefox) who need the contrast because of poor eyesight. Please.

Francis Fake 7 months ago

Yes. It is very hard for me to see at a glance. At first I thought I had Chrome open, but then after looking at Chrome noticed Chrome's default contrast is better than Firefox's.

Dark Fox 7 months ago

I'm so incredibly angry- Not only at the changes to the UI which are the biggest middle finger to the visually impaired that I've ever seen in my life, but the amount of hoops that I had to jump through to even get to the point that I could "submit feedback"

Changing the default UI's background colour to pure white causes immediate eyestrain. Removing the borders from all the UI elements makes it completely impossible to discern one element from another. I couldn't find the address bar, nor tell it apart from the search bar. All my tabs are now running together like one, incredibly long megatab. Not every website or page has an icon, and it's insanely difficult to tell where one tab ends, and the next begins.

Adding some sort of border or divider to elements has been a tenet of Graphical User Interface design since the 80s or 90s. There's a reason why the upper ASCII characters contain border characters. There's a reason why this solid design philosophy has gone unchanged for 20-30 years. Because it WORKS.

Chrome has extremely streamlined tabs, and even they have vertical bars to separate elements. I've attached a screenshot of a random tab- In this example you can easily see (outlined in red), that ~30% of the tab is in "mystery meat land", where it's impossible to tell if clicking in that area will result in activating the desired tab, or its adjacent partner. That's a flat, raw, 30% drop in user experience for tabs.

And yes, I can tell that you were trying to copy Chrome with the Address Bar- I can see that the vibrance/luminosity is the exact same between the Chrome and Firefox address bars, with Firefox's colour being slightly shifted in hue and saturation. However, by default Chrome has a single textbox that acts as both search and navigation. Whereas, Firefox has at least two, not including plugins. Thusly, Chrome has no other elements to distinguish its Address Bar from, while Firefox has a direct necessity to separate its elements.

As for the bleedingly white background- Even Software Development books from the early 90's explained why off-white background were preferred instead of white. There's a reason why grey UIs became the default in Windows 95. For someone like me, who's eyes have trouble focusing, this strain to my eyes is almost immediate. And, unfortunately, I cannot use dark themes because it aggravates my migraines.

I'm not standing on a soap box to scream, rant, or rave about "Ugh, change bad!" I'm merely imploring you to implement industry standard design philosophies that have withstood the test of time for ~30 years. Add a vertical bar between the tabs. Add borders, vertical bars, or some other method of distinguishing the address and search bar from each other. Change the UI's background from pure white, to a gentle, greyish off-white like it was before.

There's no subjectivity to this. The new implementation causes real and directly measurable usability issues- Reduced usable real estate in tabs due to lack of visual separation; Increased navigation times between the Address Bar, Search Bar, and other elements in that toolbar for the same reason of lack of visual separation; measurably increased eye strain due to a pure white background, which has been researched time and time again in this industry.

These are all objectively measurable bugs that have been mistakenly added as a "feature" with the recent update. Again, I'm not asking for a reversion. Please implement these fixes as soon as possible.

Dmitrii Frolov 7 months ago

a) you still can find gray themes: https://addons.mozilla.org/en-US/firefox/search/?q=gray
b) focus effect hasn't gone anywhere, you still can see where you click if hover mouse over. But yes, they could add some fallback icon for those few websites without favicon to make up for removed tab separators

roland 7 months ago

We shouldn't have to search for a new theme (I've always objected to themes anyway) for us to be able to use a browser properly. What was useable out of the box in default, native settings now isn't. This is the first time I've actually considered dropping Firefox due to usability issues.

David Andrianavalontsalama 7 months ago

Within a couple of minutes after updating, Firefox has just become unusable for me: Unreadable tabs, general blurry effect. I don’t get it. You’re not the only ones who get rid of a good UX in favor of “new ways” of displaying things, only forgetting people need to be able to differentiate separate elements and to read texts.

MataH 7 months ago

Yes everything is sacrificed to esthetic design, even if it is terrible design if it doesn't take in account users' needs.

Roger 7 months ago

WTF is WRONG with you people. Why on earth would you make such changes to the UI? Have you no idea that a LOT of American's have visual impairments?? I also am beyond ANGRY. FU*** LIVID at the morons at firefox. Why don't you find something else more productive to do like go play with yourself, and leave well enough alone!

Stephen Pill 7 months ago

I appreciate your thoughtfulness in making the suggestion Dimitri, but the point that is being discussed here is the DEFAULT that new users are faced with, and common-sense dictates that the default is the most easily readable

Aart van der Pol 7 months ago

But the white is still hurting my eyes

Dmitrii Frolov 7 months ago

You can choose a dark theme

Aart van der Pol 7 months ago

I did but the background is still too white.
I cant type since i am blinded by the light of the ascreen.

W. L. 6 months ago

...or you can choose a different browser. This is why even Edge is beating Firefox.

Aart van der Pol 7 months ago

How can I go back to the previous version? This version of the UI is not for me!

Alexey Veleshko 7 months ago

Type about:config in the address bar, search for "proton", set browser.proton.enabled to false.

Morrigan 7 months ago

Thank you. Worked a charm!!

MataH 7 months ago

I don't want "grey", I want something readable whatever background we choose. At least we should have the options of designing our own tabs!

Dmitrii Frolov 7 months ago

You have. If you want to change colors - you can use Firefox Color addon. If you know CSS and want to change appearance (or break something) - you can create userChrome.css (visit r/FirefoxCSS)

jdale 7 months ago

No, in fact you cannot see where you are if you hover the mouse over the tabs. There is no hover effect whatsoever. None.

Dmitrii Frolov 7 months ago

You sure?

jdale 7 months ago

Yes, I'm sure.

jdale 7 months ago

Also, note I don't get the X's to close the tabs. Those are gone too. There's no mouse-over effects whatsoever. I do still get mouse-over effects in the quicklinks, but not in the tabs.

Dmitrii Frolov 7 months ago

Can you go to about:profiles, press "Create new profile" and press "Launch another browser window with this profile" to check if it's the same there? (or if you have another default profile, you can launch it instead of creating one). Because that seems like a bug or a corrupted profile/installation. If it remains, you can go to bugzilla.mozilla.org and file a bug there. Also you can download a Developer or even a Nightly version (they are 1-2 versions ahead of release version) to see if it has the same problems too.

jdale 7 months ago

Hmm, it works as shown for you in a new profile. Interesting. Still utterly unusable.

On a tangent, the links from notification emails don't find their respective comments on this forum, and you can't search the page for the comments when the comments are collapsed. That's super annoying.

Dmitrii Frolov 7 months ago

Yeah, tried to write at medallia about such issues, but they seem to take feedback only from customers

Wayne Campbell 5 months ago

The available themes are all as unreadable as the default theme.

Will C 4 months ago

Sure, you can see it once you hover, but it's harder to *aim for the right spot*. Previously you had a clear target when you started moving the mouse (yes, not everyone is using touch).

Dmitrii Frolov 4 months ago

God damnit you're all making a cybersport discipline out of clicking big buttons. How do you even use websites?

Derek White 7 months ago

I think the designer had their monitor's contrast set to 11! Dark mode is fine, how was light f'ed up so badly?

Feedback used to be open and simple. They obviously knew there would be push-back and didn't want to deal with the influx of feedback using their old (presumably, inefficient) system.

FYI: You can go into settings and use a single bar for address & search - FF copied Chrome on this YEARS ago. Spend 5 minutes in the options, dude. I prefer the dual, and that's partly why I stay on FF.

Brian Pope 7 months ago

I agree completely. Microsoft is leading the way on messing up UI design with their borderless nearly windows. It is now much harder to distinguish multiple windows from each other. The latest version of Firefox is now significantly harder for me to read.
If you want to understand the issue look up what cataracts do to your vision. It is like looking at everything through a dirty windshield. Lower contrast text is nearly impossible to read and really strains the eyes.

Dmitriy 7 months ago

Dark Fox 2 days ago
Changing the default UI's background colour to pure white causes immediate eyestrain.

For yours eyes not mine :). I'm really hate already gray fonts and gray backgrounds. I need to use Style Editor almost everywhere. Well, tastes differ. But is it complicated to provide "pure black font and pure white background" theme at once for choice?

MataH 7 months ago

I completely agree with this comment. I am sooo angry, impossible to read the tabs, fonts and icons are ridiculously small, and worse of all, we have no choice about it! Now i have to find out how to roll back to the old version and block the updates until you fix this disastrous and dictatorial move.

Stephanie ZR 7 months ago

I agree with you totally - to the point I'm switching to Chrome. It's like they totally ignored usability guidelines.

George 7 months ago

Who ever green-lighted this change to the interface should re-examine their decision. This is terrible. As people are noting, everything bleeds together. It's terrible. Why does Firefox do this so often; they have a solid interface and then they make it a lot worse.

Francis Fake 7 months ago

Probably a techie. Techies should not be allowed to do anything except code and technical.

elmeunick 7 months ago

Probably a designer. Techies use science. I'm a programmer, I've would've never done this. Designers think of their work as some kind of art, and we know what modern art looks like nowadays: Trends and speculation that surpass anything reassembling reason.

Christian Ramsvik 7 months ago

I agree! This is definitely the work of a designer. They need to follow the latest trends, which sometimes gives strange or bad outcomes like this. Just look at software in general. When the first big one starts using more contrast, sharper edges etc the others will follow. Then it starts swaying towards the soft and washed out again. Lather, rinse, repeat.

Linda Jeanne 7 months ago

Last time I looked, there's a lawyer running Firefox. The guy who made FF a star left, and a lawyer took over. Explains everything. (I used to work in a lawfirm -- OMG!!!)

Amaris Novae 7 months ago

I have difficulty seeing the tabs because the surrounding elements are the same color, and even the highlight is difficult to see. Stronger contrast would alleviate this accessibility issue.

John Bennetto 7 months ago

The blue system colour is gone to be replaced by a white-out look for the user bar and tabs. Whoever made this decision needs to revise that decision and quickly. My system colour is a Win 10 Blue, not very light grey. Extremely hard to both look at and distinguish tabs as they all merge together. Impossible to view at night.

August van Driel 7 months ago

I prefer some kind of separation between the tabs. But even more important, using black print description on the pretty dark grey background makes it rather difficult to read.

It is too bad so many "fixes" are made just for the sake of change or cosmetics. Leave well enough alone please!

Peter Q 7 months ago

Thin, Thinner, Thinnest, No choice of icon colors for a long time. Who on earth likes these. I want my colorful icons and tabs back.

Rafael Lecuona 7 months ago

Dark and Light are not colors. Allow users to select color of choice rather than imposing this new gray or childish themes as default choices. System theme does not follow system.

Curious Confucius 7 months ago

As someone that use FF for work, the lack of clear division between tabs makes it visually straining to use for long periods of time. Can't imagine how it affects #accessibility.

WordNerd 7 months ago

I LOVE the new UI that came via FF89. The improved dark mode is a blessing. One tweak I'd suggest is to take the light-colored address bar border that appears on-click in the address bar, and make it on-hover as well. This way, when I hover over it, I see the cursor position, and if I click into it, I know where I am.

I'd also suggest applying the same effect to all clickable elements in the menu. I like the default color and brightness in dark mode, so I don't make any suggestion for changing those at all. I just think it'd be nice to have the on-click effect in the address bar become an on-hover effect, and apply it universally to clickable elements in the menu.

I also agree that the tabs are a bit too flat, at least in dark mode. I'm a fan of flat UI, but a little bit of separation using a 2-sided corner outline on the left of the current tab would be great. I've attached a crudely edited example to show what I mean.

If you wanted to go really crazy, you could use two colors: one for current tab, and a different color for any other tabs. Or you could use the same color but different thickness.

Great work on the new version!

AyeBraine 7 months ago

The issue with tabs without separators become more pronounced if you often open many tabs in one window (I usually have no less than 50, including for work purposes).

See the attached screenshot: the tabs are separated by a lot of empty space (it's even more than before, you can check by turning Proton off), they are taller, but the preview title seems to be shorter. So larger interface for less content and less visual confidence, basically.

In fact, I captured two highlighted tabs and combined them in Photoshop (second picture): you can see that the separator is essentially still there, it's even wider, it's invisible, and it takes a decent amount of space. And it can't be customized now by themes, since the separator property has been removed. So regardless of tastes, it's a questionable improvement.

Christian Ramsvik 7 months ago

Regardless of tastes it is not an improvement at all. ;-)

Géro 7 months ago

Il ne faut pas chercher très loin les raisons du déclin de Firefox.
Personnellement, je vais me tourner vers Edge ou chrome, qui sont bien meilleurs visuellement.

dramee 7 months ago

I use Twitter a lot and have a number of favorite Twitter accounts in pinned tabs. The new v. 89 pinned tab icons are smaller and there's no edges to distinguish them. It's a blur and a nuisance to have to scroll through to find the account I want. I suppose I'll learn to match the tiny icons with their position in relation to the address bar, but heaven forbid I add another pinned tab.

My eyes are old and I need edges on all tabs, pinned or not.

I think I'll look into switching to Chrome or another browser.

alberts 7 months ago

If I have multiple pinned tabs of the same page, I get the same favicon - no matter if the tabs have borders or not. I couldn't distinguish by the borders, like up to FF 88, as the tabs still looked alike, didn't they!? What am I missing here!? Just they visual target area changed a bit, but once you hover the target area is actually bigger.

I attached the screenshot with the same number of pinned twitter tabs, and if I wanted to find out which is which I'd still have to count birds or hover to get show the tab title.

I don't see the actual difference.

Dmitrii Frolov 7 months ago

The favicon size hasn't changed. I don't know how having tab separators helps you find needed tab (you can count icons instead of tiny separators to find the right one). Also, if you manage different twitter accounts, you can use multi-account containers - each container can have a color, which is shown as a line above the tab.

Also, on your screenshot, the 4th bird somehow is bigger than others - maybe Twitter changed its favicon and that's a tab that wasn't refreshed yet

dramee 7 months ago

I set "browser.proton.enabled" to false and got the tab edges back, which helped a lot. If FF wants to stay with the white/nearly white tab background, at least put the spacer edges back. That would be acceptable.

Chris Gibson 7 months ago

I would like to see the larger sized icons brought back for previously visited websites, when you press the "New Tab" button.

alberts 7 months ago

This seems like it would be better its own topic

Stuart Kovinsky 7 months ago

The "smooth transition" between tabs is really annoying (and I haven't yet found a theme that doesn't have that smooth transition). Please add back some kind of line/marker between the tabs.

Atlanta AH 7 months ago

The interface changes make Firefox look so anemic. I am considering abandoning Firefox for Google Chrome or Microsoft Edge. Go back or at least provide an easy option for people to keep the former interface3.

Sangeet Gellhorn 7 months ago

Agreed. either go back to the old version, or I'm changing to Chrome

Sangeet Gellhorn 7 months ago

This has to be a pre-release version - the bugs have not been worked out. It's not just the main window lacking in color: webpages are not displaying correctly - colors are missing, layout is wrong, text above pictures whites out the picture in a square behind the text, move the mouse over a video and the whole screen goes foggy! This needs to be debugged. This version just isn't ready! In the meantime, until this gets fixed, I'm using Chrome.

alberts 7 months ago

The points you raise regarding content rendering are not related to the update of the UI. I haven't noticed any of the examples you have listed for myself. It is better to file a ticket in bugzilla for that, as this requires more details for anyone to start looking into it to help, e.g. the link of the page, the exact issues, etc.

yellowsubroutine 7 months ago

Compared to the old Fiefox theme, it's now too difficult to very quickly tell which is the active tab, due to the low contrast difference. In Chrome, the contrast difference is also low but it's still easier to tell the difference compared to Firefox 89 due to the thicker folder tab design of the active tab in Chrome. Firefox has even less visual cue elements, so it needs more of a color contrast difference.

And then you add in the extra tab height that reduces the amount of vertical space you have for display content, and that is a big problem especially on 16:9 screens, ie the vast majority of desktop/laptop users.

I hope Firefox gets this right, because user interface is something Firefox needs to excel at given the proliferation of Chromium-based competitor choices available now. In my opinion, there should at least be a menu choice to choose "compact" like there used to be. Making people wade into about:config is going to turn off more casual users who can just easily just switch to Chrome and suddenly have more vertical space again. And I think the default theme should just have greater contrast again because that was one of the major advantages and differentiators that Firefox used to have.

If Firefox just visually turns into Chrome with less vertical space, why would anyone not just use Chromium and get better web compatibility to boot.

Dmitrii Frolov 7 months ago

>the extra tab height that reduces the amount of vertical space you have for display content

That's 11 pixels.

33px vs 44px.
Bookmark panel takes up 2.5 times more space than that (28px).
There is an idea about bringing back compact mode, though.

David Andrianavalontsalama 7 months ago

I used to love the way texts in Firefox tabs were clean and readable. New version 89.0 brings blur. Never asked for that. Big loss. Text is fading away, not the UX I feel comfortable with.

David Andrianavalontsalama 7 months ago

Note: Upvoting a comment on this page doesn’t update the thumb icon’s color or anything. You just cannot tell if you’ve already upvoted a comment or not. And clicking on it again will remove your upvote. This brings uncertainty to the UX.

Rafael Lecuona 7 months ago

I was just murmuring and cursing this very thing while upvoting your comment above.

alberts 7 months ago

maybe something to report here!? https://crowdicity.com/contact-us

Dmitrii Frolov 7 months ago

I wrote them an email about some of the issues, but they told me to go and create an account at help.medallia.com, which is not a usual zendesk (which supports support over email).

If anyone is willing to create an account there and post these issues, I can send him/her the issues I found

alberts 7 months ago

Outch! Fair enough :/ Maybe then hopefully the moderators will pick some of these comments up and forward

David Andrianavalontsalama 7 months ago

Just googled “alternatives to firefox”. Just can’t stand the new UX and I need to work.
I really don’t get it. Until then and for 16 years, Firefox has been my default browser. Blurry tabs are just so obvious a pain. What happened?

Jimro 7 months ago

Contrast: Tab Titles, Bookmarks, open web pages - all have become faded, dim, very little contrast. Using Bold on the Font would help, but increasing the Font size would be a bigger help for those of us who now need glasses to read the fine print

Howard Dengate 7 months ago

As a 73 year old with decreasing eyesight the change in Firefox to a reduced contrast and smaller font is a real pain. How can I get back to seeing the screen again?

Francis Fake 7 months ago

I recommend uninstalling and using a different browser until they get this sorted out.

Dmitrii Frolov 7 months ago

Font size wasn't decreased, it always was this way

Riguel Gama 7 months ago

Horrible redesign. The contrast is too high, my eyes hurt. Changing dark gray for pure black is a bad decision. Now everything is framed in bright white. And that pastel blue ..... It really hurts the sight.
It's the worst color redesign I've ever seen in Firefox; just as bad as Thunderbird, by the way.
I already changed the default theme, but it's still bad.

Riguel Gama 7 months ago

I want my old interface. Not all of us use the browser on a cell phone.

ss 7 months ago

Agreed!

E NYB 7 months ago

Having no delineation between where one tab ends and another begins is very confusing. While everything looks very streamlined, the usability has decreased immensely. I don't care if my browser is pretty. I want it to not cause eye-strain, be easy to find what I'm working with, and use as few system resources as reasonably possible.

in terms of eye-strain and use, this update is not a great thing.

Ya Su 7 months ago

I like the new changes, maybe you can add the theme "Mozilla old version" for those who don't like the new UI. The only thing I don't like is the way the dark/light theme works. I have been using Mozilla and the same theme since 2013. I would like to keep the image of the theme but with the dark theme, both combined. I think I just need the context menus in dark mode, to be more precise.

Derek White 7 months ago

I agree. Windows has separate modes for Windows and Apps. I like to use dark for windows and light for apps. Mixing works. Would be cool to mix here, too. (This assumes they fix the contrast issues on light mode. You are kind of hijacking this post to add in a new idea - add a new post, instead.)

alberts 7 months ago

You can choose the "System" theme or "Alpenglow", which both adjust to your OS theme, but you can also set light or dark theme independently of the OS's theme.
(Agreeing with opening a new post for this discussion ;) )

Elia Tarasoff 7 months ago

You can create your own custom theme, that would have the colors on menus from dark mode, and the images and colors on the toolbar from light mode: https://color.firefox.com

alberts 7 months ago

Maybe a new topic to get that tool updated for Proton

alberts 7 months ago

Ya Su, I guess what you want is that the theme can adopt to the OS theme as built in "System theme" and "Alpenglow". If that is not possible for theme authors yet to do, that might really be worth in a new topic as Derek suggested. If it is possible for theme authors already, then it would be a matter of reaching out to the creator of your theme to adjust it I guess.