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?
  • edited July 7, 2015
    From Rintze's twitter discussion, I like the colors that ColorBrewer offers: 9 data classes, qualitative data, set #1 or #3 look pretty good to me.

    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.
  • @aurimas, if you select "colorblind safe", "qualitative" only gives 4 colors or less. The palette at http://www.somersault1824.com/wp-content/uploads/2015/02/color-blindness-palette.png seems to cover enough colors to replace the current 9.
  • edited July 8, 2015
    Which 9? I can pick out maybe 5 7 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.
  • I mean, I'm not dismissing the colorblind pallet, if we can make the pallet as colorblind compatible as possible that's great. But I wouldn't go to the extremes.
  • I'd assume that colorblind folks are more attuned to shade differences and the actual colors for regular vision are quite distinct, though unfortunately not very nice colors.

    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...
  • We should be able to use Firefox native <input type="color"> (as of HTML5 and Fx v29) and it should just be a matter of adding a "Custom" entry in the color selection dropdown that would open up a color selection window.
  • Example of replacing the current colors with those from the 15-color palette: https://twitter.com/rintzezelle/status/618785999112564736

    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.
  • That looks pretty good, actually. IMO it's an improvement over existing colors even for non-colorblind users. Given that the colors stay the same overall, this patch should be easily accepted. Let's make sure it's actually an improvement for the colorblind users though.
  • Not sure how accurate this is, but here's a color blindness simulator http://www.color-blindness.com/coblis-color-blindness-simulator/

    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.
  • edited July 10, 2015
    I think we could make some small tweaks — in terms of both differentiation and accessibility — but I'm not going to poll Twitter on the colors we use. (Also, as far as I know we've had zero complaints from colorblind users in the two years since this was added, and it's not even clear to me that the person who mentioned it on Twitter is affected.)

    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.)
  • (Another issue, if the colors became configurable: since colors are synced as hex values, all users in a group would see the same (e.g., colorblind-safe) colors.)
  • changing the available ones wouldn't affect any existing tags unless they were reassigned to the new colors or the DB settings were updated.
    Actually, I think that's a good news. I was concerned that if we were to change the colors, existing tags would change.
    if the colors became configurable: since colors are synced as hex values, all users in a group would see the same (e.g., colorblind-safe) colors.
    That's also something I was concerned about, but I think that having the same color-set within a group would be ok. If someone is having accessibility issues with the colors, they could ask the group admin to change the colors (is that restricted to group admin btw? Probably anyone with edit rights, correct?)

    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.
    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.
    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.
  • Rintze's suggested alternatives work much less well
    Yeah, I agree. I tried to stay as close as possible to the current color scheme, though, so we might be able to pick a better set. Maybe https://twitter.com/rintzezelle/status/618787492469284864 works better.
    and it's not even clear to me that the person who mentioned it on Twitter is affected
    Yeah, it looks like neither one is: https://twitter.com/rintzezelle/status/618871955551330305
  • I'm a colorblind person. The current palette isn't great for me (only six of them are readily distinguishable). I'll take a look at some of the options presented here when I have a better internet connection if you like.
  • @bwiernik, that would be great. We'd also be interested in knowing your type of color blindness, should you know and not mind telling us.

    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.
  • I've not been formally tested, but self-assessments using a few different instruments very strongly suggest Protanopia.

    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.
  • (I wasn't suggesting those, to be clear. Those are just the colors from Rintze's set in context.)
  • Using colors from Alternative Colour Scheme would give: http://s30.postimg.org/bwaxl48v5/bright_palette.png (the light yellow is a bit lighter)
  • edited July 10, 2015
    (I wasn't suggesting those, to be clear. Those are just the colors from Rintze's set in context.)
    Sorry, misread your post.
    Using colors from Alternative Colour Scheme would give: http://s30.postimg.org/bwaxl48v5/bright_palette.png (the light yellow is a bit lighter)
    I quite like that.
  • "Using colors from Alternative Colour Scheme would give: http://s30.postimg.org/bwaxl48v5/bright_palette.png"

    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)
  • I think it's impossible to have a fixed color palette that satisfies everyone's needs. I'm not sure why a color-picker would be offensive, as mentioned above; I'm actually more likely to get annoyed when I can't customize something. I would certainly appreciate a setting somewhere that at least accepted HTML color codes. Currently the only option is to manually edit the tagColorChooser.js file.
  • I'd agree with @dmitriyc - I have quite niche requirements for my colours, which rely on their semantics (e.g. red = to read, green = have read). I also don't want to compromise my colour scheme because of other users' alternate requirements.

    A picker would solve things.
  • edited March 21, 2018
    I would love to be able to customize my colors.
  • Just want to say +1 for the ability to customize colors.

    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.
  • +1 for custom colours too. I would like to have tag colours same as my PDF highlighter colours to maintain relationship between tags and pdf annotation.

    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!
Sign In or Register to comment.