Pencil button suffers from low contrast
otbutz opened this issue · 2 comments
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:
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.
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
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:
That's why i would rather use something like this instead:
https://fontawesome.com/icons/draw-polygon?f=classic&s=regular