Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pencil button suffers from low contrast #338

Open
otbutz opened this issue May 24, 2023 · 2 comments
Open

Pencil button suffers from low contrast #338

otbutz opened this issue May 24, 2023 · 2 comments

Comments

@otbutz
Copy link
Contributor

otbutz commented May 24, 2023

grafik

I only discovered this button because I stumbled across your blog post.

Using light grey on a white background isn't ideal. The icon itself isn't much help either. It's a pencil next to a text box, which doesn't really convey the idea of "click here to draw polygons".

I'd suggest using more distinctive icons like geojson.io:

grafik

@karussell
Copy link
Member

karussell commented May 24, 2023

The problem is that it is a disabled button and should not be that bold.

Another problem might be that this button is invisible if the custom model is not enabled and so this is a bit hidden. But this makes sense from a functional perspective. Not sure how to improve it because clicking on it and enabling the custom model might be counter-intuitive (?)

It's a pencil next to a text box,

I'm unsure why the icons you refer are better in this regard. The current icon could be also interpreted as a pencil next to a rectangle.

@otbutz
Copy link
Contributor Author

otbutz commented May 24, 2023

The problem is that it is a disabled button and should not be that bold.

I would say that other elements also suffer from this problem, but to a lesser extent.

  • gear icon
  • add location
  • Options

grafik

Maybe you could find a different mechanic to mark enabled elements instead of using grey for disabled ones. You're already using a blue shade to highlight the active profile. Maybe you could alternate between black and a blue?

Changing the background color might also be a valid approach to increase contrast.

Note that I have good eyesight, so this is a minor inconvenience for me. However, visually impaired users may not be able to fully use the interface.

Another problem might be that this button is invisible if the custom model is not enabled and so this is a bit hidden. But this makes sense from a functional perspective. Not sure how to improve it because clicking on it and enabling the custom model might be counter-intuitive (?)

I wouldn't change that to be honest.

I'm unsure why the icons you refer are better in this regard. The current icon could be also interpreted as a pencil next to a rectangle.

The current icon is the widely used for text editors and text input boxes:

grafik

That's why i would rather use something like this instead:

grafik

https://fontawesome.com/icons/draw-polygon?f=classic&s=regular

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants