Make template colors / pickers for node and edge colors more accessible

[jdanish]

To help make colors that we pick for nodes and edges more accessible, I propose the following:

1) Let's change the default template to have a set of accessible colors 2) In the top of the node and edge color selection areas in the template editor, let's include something to the effect of:

We recommend you select colors from an accessible set such as: SET ONE SET TWO

@kalanicraig can you ID 2-3 sets that you think we should use?

IMPLEMENTATION NOTE: We'll want a different set of colors in edges than nodes. Not sure how to handle that or whether we should use the same sets and leave that to the user?

[kalanicraig]

Here you go @jdanish

Both palettes from Paul Tol

Palette 1 (Tol's "light qualitative" scheme) is a lighter color palette that allows black text to contrast over the node-circles, though the colors may be harder to distinguish on the white background of the main viz area. The grey is specially chosen so that users with complete colorblindness can distinguish between it and the other colors.

• light blue: 77AADD (R: 119; G: 170: B: 221)
• light cyan: 99DDFF (R: 153; G: 221: B: 255)
• mint: 44BB99 (R: 68; G: 187: B: 153)
• pear: BBCC33 (R: 187; G: 204: B: 51)
• olive: AAAAOO (R: 170; G: 170: B: 0)
• light yellow: EEDD88 (R: 238; G: 221: B: 136)
• orange: EE8866 (R: 238; G: 136: B: 102)
• pink: FFAABB (R: 255; G: 170: B: 187)
• pale grey: DDDDDD (R: 221; G: 221: B: 221)

Palette 2 (Tol's "bright qualitative" scheme) is a darker color palette better suited for contrast with the white background of the main viz area, though the black text of the node labels may be harder to distinguish. The grey is specially chosen so that users with complete colorblindness can distinguish between it and the other colors.

• blue: 4477AA (R: 68; G: 119: B: 170)
• cyan: 66CCEE (R: 102; G: 204: B: 238)
• green: 228833 (R: 34; G: 136: B: 51)
• yellow: CCBB44 (R: 204; G: 187: B: 68)
• red: EE6677 (R: 238; G: 102: B: 119)
• purple: AA3377 (R: 170; G: 51: B: 119)
• grey: BBBBBB (R: 187; G: 187: B: 187)

[jdanish]

If it is not a major hassle, maybe using this color picker instead would let us just embed one of those two palletes into the picker and simply add 1 line above?

https://www.cssscript.com/color-picker-coloris/ repo: https://github.com/mdbassit/Coloris

[benloh]

Note we probably want to account for selection and highlight colors as part of the palette. Ideally they would all be designated together. e.g. you would select a palette (bright, pastel, muted, etc.), have x number of colors to choose from, with two colors set aside/suggested for selection and highlighting.

[jdanish]

Agreed!