codeforamerica / city-analytics-dashboard

⛔️ DEPRECATED Display google analytics from a city's website as a dashboard
MIT License
38 stars 34 forks source link

Evaluate mobile and desktop colors #58

Open milafrerichs opened 9 years ago

milafrerichs commented 9 years ago

Right now we have two blue colors. To get more visibility we discussed to use complementary colors.

Current colors

bildschirmfoto 2015-08-19 um 15 50 11

Two suggestions:

bildschirmfoto 2015-08-25 um 17 38 34 bildschirmfoto 2015-08-25 um 17 37 22

migurski commented 9 years ago

@phae: can we get your eyes on this? We are adding a contrasting color to replace one of the two blues; it will also appear in labels like these from #59:

label colors

The two options above happen to be right in my zone of greatest colorbindness, and it’s hard for me to distinguish between them. I’d love you to weigh in on color choices overall.

phae commented 9 years ago

Eyeing...

The fact that it's a problem for your colour-blindness is an issue of its own. :( Ideally I'd want the one that you can see best, @migurski - are either of the two more clearly defined to you?

If they're equally viewable, then my preference is to the first of the two (the darker shade of the orange). The two shades of blue side by side on the graph are definitely harder to see in difference and I'm not feeling the light shade of yellowy orange.

The blue/orange combo coincidentally matches the colour pairing combo we're using on Chime, which is a nice nod towards a unified look and feel for internal-CfA-made apps.

In case you're interested, our shades for Chime are: #2b93d1 (cyan blue), #bfe4f9 (pale blue) and #f26522 (orange), if you want to try those out instead.

migurski commented 9 years ago

The first of the two looks a bit less muddy to me. The contrast with the blue is fine in both, but the second uses a shade of color that I know I’m weak in, so it reads as muddy. I’d be curious to hear what @ericfischer thinks, I know he’s colorblind in a different way than I am.

phae commented 9 years ago

The second one looks "muddy" to me too in terms of colour cleanliness, interestingly. It's a very desaturated shade of orange.

It looks like how orange juice tastes after brushing your teeth, if you know what I mean.

e-n-f commented 9 years ago

Thanks for asking. Either of the two-color stacked bars is good for me, with the first being a little better.

milafrerichs commented 9 years ago

I created a different set of colors. Base color is now the darker desktop color and the complementary color for it is the brown: bildschirmfoto 2015-09-01 um 11 52 28

e-n-f commented 9 years ago

From a deuteranope perspective this is much muddier than the previous orange, by the way, although still possible to see.

migurski commented 9 years ago

Yes, I think based on this morning’s conversation we’re going with one of the snappier options above that has a larger value difference.