18F/dashboard — pull request #161 by shawnbot (2014-11-24 20:06:37+00:00)
Title: Status display color schemes demo

This is a really simple demo to test a new design for the "status" display using [ColorBrewer](http://colorbrewer2.org/) color schemes, per my comments on #152. You can view it locally at [/dashboard/colors/](http://localhost:4000/dashboard/colors/). Here is the original:

![image](https://cloud.githubusercontent.com/assets/113896/5171802/acd5ae5a-73cf-11e4-8721-919a03fdd1ea.png)

And here is the proposed change, using the `BuGn` color scheme:

![image](https://cloud.githubusercontent.com/assets/113896/5171827/ed14a58e-73cf-11e4-8071-dba0c2b8be4f.png)

I also like `PuRd`:

![image](https://cloud.githubusercontent.com/assets/113896/5172010/310975fc-73d1-11e4-915e-3c77170667bf.png)

Please try some of the other options listed in the drop-down and voice your preferences! The biggest issue that I can foresee would be the color contrast of black text on the darkest color ("live"). According to the [Sketch color contrast analyzer](https://github.com/getflourish/Sketch-Color-Contrast-Analyser) it's 4.9:1 for the `BuGn` scheme's `#238BC0 ` and 3.8:1 for `PuRd`'s `#CE1256`. The `GnBu` scheme's `#238BC0` outperforms both of those with 5.5:1 contrast, but that blue clashes with `#1188FF` pretty badly.

I've also templated the HTML so that it's easier to update. When we've picked a color scheme the hex values should just go straight into the YAML [page data](#diff-eaf5d3427fdd176b1f57f7138617ab5fR5) for each status "stage". This data could be made site-wide so that it could drive the CSS as well.