iOS app: poor visibility of bottom bar buttons in some colour schemes

UX
1

I find it difficult to see the button bar buttons on the below discourse. Maybe the colour of the icon could be defined in a different way?

selectbutton.net

image
image750×1334 83.9 KB

3 Likes
2

@pmusaraj any ideas?

2 Likes
3

Also, the left/right icons seem to be a different colour - even less visible - than the link/down icons?

edit: ah, the different colours denote enabled/disabled

4

Still a problem for me

5

Thanks for the reminder @gingerbeardman, I signed up for the site so I could test this out. This isn’t the site’s default theme, in fact this site has several colorful themes, it took me a few minutes to find this specific theme.

Anyhow, is there any chance you could propose to the site admins a subtle CSS change for this theme?

They can modify the header primary color variable, and change it to a lighter green. This would affect the header too, but that would be useful, the buttons in the header could use a bit more contrast.

Or, if they must keep that button color in the header, they could increase the opacity of the bottom bar background (to match the header) using:

// overrides opacity of background, originally in footer-nav.scss
@supports (-webkit-backdrop-filter: blur(10px)) {
  body:not(.footer-nav-ipad) .footer-nav {
    background-color: $header_background;
  }
}

That would give you this (contrast would still be not enough IMO):

image
image738×884 90.7 KB

2 Likes
6

Oh! I didn’t realise there were so many other themes. I’ll try a different one. Thanks.

Maybe a solution would be to use the colour but apply some CSS filter to change it rather than doing alpha tints?