Tag color palette (and color blindness)
There seem to be some people who don't like the tag color palette, and there might be an issue for colorblind folks: https://twitter.com/LizNeeley/status/618448140853624832
Dan, would you be open to a patch to:
a) change the palette to a more colorblind friendly selection, e.g. 9 colors from http://www.somersault1824.com/wp-content/uploads/2015/02/color-blindness-palette.png (from http://www.somersault1824.com/tips-for-designing-scientific-figures-for-color-blind-readers/), or
b) add an option to the color assignment window to allow the user to pick their own color, e.g. by entering an HTML color code?
Dan, would you be open to a patch to:
a) change the palette to a more colorblind friendly selection, e.g. 9 colors from http://www.somersault1824.com/wp-content/uploads/2015/02/color-blindness-palette.png (from http://www.somersault1824.com/tips-for-designing-scientific-figures-for-color-blind-readers/), or
b) add an option to the color assignment window to allow the user to pick their own color, e.g. by entering an HTML color code?
I think allowing color customization would not be a huge problem. The only issue I can see is syncing that information, but it shouldn't be too difficult (we don't have to worry about conflicts too much, I think) The selection of custom colors should be something more sophisticated though, like a color wheel, but manual entry should also be possible.
In any case, we do need to set a default set of pre-selected colors and I think the current set of colors is not very discriminative.
57 that are distinct enough for labels (i.e. I'd hardly consider more than two shades of "deuteranopia gray" to be workable). In either case, if the pallet is customizable that is not really an issue and we should pick colors that are workable for 90% of users.Visually, I agree the 3rd option of the qualitative set on ColorBrewer looks very nice.
Not sure about customization -- sounds pretty involved to me, especially once we also consider GUI implementation. There's so much stuff to be done...
And while I like the 3rd scheme of the 9-classes qualitative color (see https://twitter.com/rintzezelle/status/618787492469284864), it's not colorblind safe, so if we choose that then we probably need some customization options.
I looked at the current and proposed pallet under the deuteranopia filter and it seems like there are still a couple colors that look very close (e.g. first two). Not sure how much more we can tweak it though.
The existing colors weren't chosen randomly. Among other things, they were chosen to be visible as both text and as small squares against a light background and to be easily differentiated. The existing colors more or less achieve that — and, in context (which is very different from looking at a grid of swatches), to my eyes look pretty good, together and independently. (The green isn't great.) Rintze's suggested alternatives work much less well — the yellow is essentially impossible to read in the tag selector, the red/brown are muddy and nearly indistinguishable against white at that size, similar for the blue/purple, and generally the colors are, in my view, a lot less pleasant:
Current: https://www.dropbox.com/s/ntvdzxigmjtm0le/current.png?dl=0
Rintze's alternatives: https://www.dropbox.com/s/dclopunkf9og05o/alt1.png?dl=0
(Scale down if you're not on a high-res display.)
We could possibly make the defaults a bit better for colorblind users, but I don't think that should come at the cost of making the colors work much less well and be much less attractive for users with normal vision.
Also worth bearing in mind that it's still up to the user to select the colors to use, so the standard warnings about color accessibility don't apply to the same degree. Even running our existing colors through the simulator, it looks like you can get at least four and maybe even 6 distinct colors (I didn't try them in context), though they're certainly ugly. At the moment we allow only 6 colors to be used anyway, and even if we increase that to 9 as some people want, the usefulness of Zotero isn't significantly decreased by an inability to choose more than 4 or 5 colors.
We could perhaps make the colors easier to change: a colorblind-accessible set that could be toggled on from a pref, having all the colors read from a pref, or just a hex field or colorpicker in the dialog. Not sure which I like the best. I'm usually fairly offended when I see a colorpicker — that seems like someone else's job — but flexibility, at least under the hood, is nice, so we should probably at least have the array in a pref.
(Also, changing existing colors for everyone is a little tricky, because assigned colors are stored in the DB as hex values, so changing the available ones wouldn't affect any existing tags unless they were reassigned to the new colors or the DB settings were updated.)
I think ideally group color tags should be a one-way sync (except for admins), where you could sync down the existing (or new) color tags and then assign your own colors if you wanted to (even with the current non-customizable colors). Those settings would not affect other users then. Something to consider in the future. I think that an option to open a color picker from the color drop-down that already has 9 pre-selected colors (and maybe colors you have chosen in the past... or not) would be convenient both for lazy users (myself included) and those that feel strongly about their favorite colors. Hidden pref is certainly beneficial in any case.
Some other palettes:
http://mathematica.stackexchange.com/a/20883
http://bconnelly.net/2013/10/creating-colorblind-friendly-figures/
https://personal.sron.nl/~pault/ (Alternative Rainbow Scheme: https://personal.sron.nl/~pault/images/rainbow.png)
The last one might be best: sufficient colors and no light yellow.
Dan makes a lot of very good points. I've never had a problem working with the current color set because you can only set 6 colors--there are six colors that I can clearly distinguish, so it works fine. If the current set of 9 were all allowed to be used at once, I would have difficulty.
One not on my comments about color sets: It's generally a lot easier to distinguish colors in a swatch than to identify them in isolation, so I would need to see them in action (like with Dan's examples) to form a completely confident opinion.
Looking at the ones you posted in the post directly above:
The first set (Mathematica) are all very easy to see, but, practically, I kind of miss that there is no clear green or red. The colors aren't very pleasant to look at against a light background.
The second set (B Connelly) are also very easy to distinguish, and I like the brightness. Usually I have the most difficulty distinguishing dark colors (for example, the default red and black in Microsoft Word or R look the same to me unless the areas of color are very large).
The third link (Alternative Colour Scheme: https://personal.sron.nl/~pault/images/brightpalette.png) is the best one. The colors are very bright and all very easy to distinguish, even the dark green, light green, and yellow
The last one (Alternative Rainbow Scheme), the yellow (6th from left) and light orange (7th) are very similar against a light background.
As for the previously posted ones:
(https://twitter.com/rintzezelle/status/618787492469284864): Doesn't work--red/orange and light blue/purple/pink are all very hard to distinguish when not right next to each other.
Dan's suggested change (https://www.dropbox.com/s/dclopunkf9og05o/alt1.png?dl=0): The Red/Orange that are used on the first and last items in the list look nearly identical. Same for the two blue/purple colors on the second item.
(https://twitter.com/rintzezelle/status/618785999112564736): 11/12 are very close, so are 7/8, and like Dan says the light colors are hard to read in the tag selector
Color Brewer: First set is easy to distinguish. So is second set (but probably too light for tag selector). Third set the blue/pink are very similar.
That also makes a good difference between the blue and the green - I can't really tell them apart at the moment when font size is set to small. (even the red is so dark it starts to look like the same dark little square)
A picker would solve things.
For whatever reason, certain tags "feel" like they ought to have a certain color for me. Like I'd like to have a light blue and a dark blue for two different related options, but right now there's only one blue. Or that there's no red at all, just a pink and a maroon.
Just a standard color picker would be ideal.
I would even consider manual changes of tagColorChooser.js file, but I can't find it...
Also, existing colours don't really work well with my eyes :D
Thanks in advance!