Question on icon colors

[agryson]

I have lowered the color contrast for "unselected" axis by making edges color equal to shape color

Technically, this is not advised in the Tango guidelines. To ensure correct contrast on a wide range of backgrounds, there needs to be an outline whose color is specified as "the primary color at 20% lightness value".

There is some room to interpret 'primary color' but the guidelines (for good reason) cite the dark outline as a requirement (though the highlight is just advised for most materials but optional)

I agree that your white outline solves the same problem, but would inverse the order suggested by the Tango guidelines - and requires an extra pixel anyway so comes to the same trade-off.

If you want to play around with it (and still respect Tango), try choosing different fills for the axis from the Tango palette, then in the stroke simply set the Lightness value to 20% of the fill Lightness.

(See the colors in the selection box in this image for an example, the main color is Chameleon 2, the highlight stroke is Chameleon 1 and for the outer stroke I simply set the stroke to Chameleon 2 then divided the L (116) value by 5 rounded to nearest (23)).
Works with any color and gives consistently excellent results!

colors.png (58.85 KiB) Viewed 1816 times

I can write up a tutorial on my wiki talk page if you like? You can play with all the color combinations you like.

Alternatively, maybe the axis could be a black glassy material? Then you could use a dark base color with dark outline and only a single 2px stroke of high contrast highlight?
e.g. :

axis.png (503 Bytes) Viewed 1816 times

[pablogil]

Thank you @agryson for the Tango technical explication, I obviously wasn't aware of it.
Anyway I think when having a long and stretched shape (the axis) which only has a1 pixel width, if you then apply an outer outline of 1 pixel to both sides it results on a 2 pixel almost black line that kind of hide the background color... In other icons this is irrelevant but here, where you want to easily locate small icons by its reference color (red = X axis, green = Y axis, blue = Z axis) I think it would be a situation where the rule may be broken.

I understand pure Tango guidelines don't suggest to do it, but I see more suitable the modifications I showed you... Anyway, it's just an opinion You are doing a pretty good work and we all want you to continue it, no matter what opinion we have (or just me, hehehe).

Thanks

[agryson]

Anyway I think when having a long and stretched shape (the axis) which only has a1 pixel width, if you then apply an outer outline of 1 pixel to both sides it results on a 2 pixel almost black line that kind of hide the background color... In other icons this is irrelevant but here, where you want to easily locate small icons by its reference color (red = X axis, green = Y axis, blue = Z axis) I think it would be a situation where the rule may be broken.

Yeah, I see what you mean, rules are made to be broken! I don't mean to suggest they should be blindly followed.

But if you want the axis to be mainly dark, try some different things out - I tend towards matte materials, but Tango is very strongly "real world" based - so maybe different materials could be modelled - I suggested glass, but you could try different things out and play. Only thing is that Tango suggests dark on outside, with good contrast - which still leaves lots of room for different approaches.

I never make my lines thinner than 2px at a 64px scale (this works out as 0.5px at a 16px scale - barely visible!) so at 64px, try a single dark stroke at 6px thickness and a 2px one inside, this gives a "1.5px" line once you scale down to 16px - so even with what look like thick lines, they quickly become single pixels scaled down. Whatever colors you like, but to help I've created a "FreeCAD-Tango" pallette... let me know what you think!

[pablogil]

I have installed your palette and, if possible, I would suggest to use the 3 first color levels for coloring (for instance "red scarlet", "sky blue" and "chameleon") while for "unselected axis using "aluminium 2" for background and "aluminium 4" for outline... it that possible?

Axis_X.png (3.51 KiB) Viewed 1844 times

Axis_X_preview.png (19.02 KiB) Viewed 1844 times

[agryson]

Looks good to me! But drop the y axis down one pixel maybe to prevent that anti aliasing fuzz at 32px.

[pablogil]

Looks good to me! But drop the y axis down one pixel maybe to prevent that anti aliasing fuzz at 32px.

Please, I let you do it as I know you have updated the shapes and I don't know exactly how... my suggestion is just about colors and it's easier for you to change them... or share with me the most updated files and I change the colors

Thanks

[agryson]

No problem, I'll try to have it up tonight.

[agryson]

Please, I let you do it as I know you have updated the shapes and I don't know exactly how... my suggestion is just about colors and it's easier for you to change them...

Here you go, I used the aluminium 4 for the stroke as you suggest. Looks great on light backgrounds, I'll have to get used to it on dark backgrounds!

[pablogil]

Please, I let you do it as I know you have updated the shapes and I don't know exactly how... my suggestion is just about colors and it's easier for you to change them...

Here you go, I used the aluminium 4 for the stroke as you suggest. Looks great on light backgrounds, I'll have to get used to it on dark backgrounds!

Great, I have updated the outlines with the "third color level" for red, green and blue from Tango palette. I know they don't contrast as much as in your last version but I still think they will make users locate better the strokes by it's main colors... let me think what you think about it.

EDIT: typos

[agryson]

I have updated the outlines with the "third color level" for red, green and blue from Tango palette. I know they don't contrast as much as in your last version but I still think they will make users locate better the strokes by it's main colors... let me think what you think about it.

Sorry, I hadn't understood you wanted to to do that.

I think it looks ok, I'm still afraid that the darker line is needed for contrast (especially on primary colors since a color blind user will rely more on value contrast than hue contrast for those colors). You should test it in a build though - the dark outline also helps at smaller sizes, it's like opera makeup that helps people in the back seats and until you see the different approaches in the real interface at small pixelated sizes it's difficult to tell.

But even I used Scarlet 3 for outlining on an icon in the Draft workbench, so I understand that sometimes it's necessary, to my non-color blind eyes it looks great!