[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)