[DATA VIZ] colors

[amycesal]

First pass at these. NONE of the hex codes/actual numbers are correct.

I think I'm mostly worried about sequential colors at the moment. Since they are mostly used for maps, it probably doesn't make sense to use a blue OR a green. Thoughts?

@designlanguage is going to check for 508-ness and alignment to current colors.

@marteki @Ekellett @bfongdata @piccocesar want to kick the tires and let me know what fails?

[ekellett]

Hey @amycesal can you send us the Hex codes when you are ready/get a chance so we can test them out in the wild? A list of hex codes would be fine (doesn't need to be put in the formatted document). Thanks! Very excited to try them out!

[amycesal]

HEX: #00A35B HEX: #B85537 HEX: #007A7C HEX: #E9C7C0 HEX: #B0CFD8 HEX: #B7B7B7 HEX: #B7D491

HEX: #0C568C HEX: #007A7C HEX: #0087CC HEX: #00A35B HEX: #899CBC HEX: #91B3B4 HEX: #87B7E2 HEX: #B7D491 HEX: #B85537 HEX: #AC386C HEX: #917865 HEX: #D7883D HEX: #E9C7C0 HEX: #E2BFCB HEX: #D4C8C0 HEX: #F5DFC3

HEX: #DFE6DD HEX: #00A35B HEX: #AFD1A6 HEX: #EAD9E0 HEX: #C5819D HEX: #AC386C HEX: #216B9D HEX: #13425F HEX: #0C568C HEX: #5988B4 HEX: #88A6CB HEX: #CFD8E5 HEX: #D7883D HEX: #6A3D18 HEX: #AE692E HEX: #F1A847 HEX: #F3CEA0 HEX: #F5EDDF HEX: #478E42 HEX: #234522 HEX: #316330 HEX: #7DBA69 HEX: #B7D491 HEX: #E3EBD7

HEX: #E2BFCB HEX: #AC386C HEX: #C5819D HEX: #7D6048 HEX: #D7883D HEX: #A99586 HEX: #D4C8C0 HEX: #F4BD77 HEX: #F5DFC3 HEX: #E9C7C0 HEX: #B85537 HEX: #D88A76 HEX: #007A7C HEX: #52A0AC HEX: #B0CFD8 HEX: #AEC2DB HEX: #0C568C HEX: #5988B4 HEX: #437E43 HEX: #67BD86 HEX: #C7DEC3

[bfongdata]

I created a file for Tableau to use these color palettes. Do they have a specific order they should go in? Right now they are in whatever order was listed.

[Scotchester]

Requesting an update on this from @amycesal and @designlanguage. Thanks!

– The Eye 55 Grooming Crew

[amycesal]

After talking with @ajbush about Consumer credit trends charts some issues we have using the illustration color scheme are:

• less steps of colors so you know which ones to use
• navy and teal are too close
• can't use same percentage of all colors
• navy is too muddy
• lights/tints are too muddy
• need darker tones of everything for contrast

[amycesal]

Maybe let's table map colors for now. And work within our current color palette and see where that gets us.

@nataliafitzgerald @ajbush @designlanguage @ekellett what issues do you see with this?

[amycesal]

Not that we'd ever do this, but when we use all the colors, the navy and pacific end up looking really similar.

[nataliafitzgerald]

@amycesal Have you tried the above combinations in the gray scale view? That helped us identify issues when we were trying to nail down colors for CCT. Maybe you could test that and post here?

Also, for the cool family did you try using brand green for the emphasis color? If yes did you run into issues with it?

[ajbush]

I think those options are looking good @amycesal!

My eye can discern the different levels of color but I've been searching with no luck for color contrast requirements for data viz in general and specifically line graphs.

For Consumer Credit Trends we eventually tried to meet WCAG 2.0 contrast levels for normal type this is what led us to explore varied line thicknesses to keep the contrast high. Some of the current tints you are using wouldn't pass those seemingly aggressive guidelines.

I know we'll need to use direct labeling whenever possible and be smart about how we apply the colors but I'm still wondering what rules you've seen around contrast for data viz @amycesal?

[amycesal]

Black and white view

So, you generally want all of the lights to have the same color density/weight and all of the darks to have the same color density/weight to not give emphasis for one thing over another unintentionally. This is where pattens, different strokes, and direct labeling come into play, so that you don't use only color to identify the bar/line/wedge. However, we don't want well sighted users to confuse the blues, and think they might be the same thing or related if they are not.

brand green

@nataliafitzgerald As far as using the mid-dark instead of the brand green, I was looking to have all of the "dark" colors have the same density. and also be 508 compliant to have white text on them. Which is why I chose the mid-dark over the true brand.

other guidelines

@ajbush it's hard, because there aren't a ton of guidelines for color for data viz. there's a lot of theme generators like http://colorbrewer2.org/ and https://www.vis4.net/blog/posts/avoid-equidistant-hsv-colors/ but they mainly focus on contrast/brightness/density between the colors themselves and not contrast with the background.

So I think my questions are:

• do we adjust the pacific and navy
• do we want to WCAG test the "light" colors and know that we will probably need to adjust the "dark" colors to have enough contrast between the 2, or just run with these for a bit and then talk about a more serious re-vamp (aka adding/adjusting new colors)