Design notes

A mood tracker you can read, however you see color.

Around 1 in 12 men cannot reliably tell red from green, and most mood trackers are built on a red to green scale. Ours runs amber to teal, and mood shows up in the height of the bar as well as the color. Here is the work behind that.

Where red to green breaks

Red-green color vision deficiency affects around 1 in 12 men and 1 in 200 women, which makes it one of the most common inherited conditions there is. The red to green scale is the one scale it takes apart.

You can measure how badly. Below is a red to green mood scale next to ours, and you can run both through the two common forms of the deficiency. The number is how far apart the low and good swatches stay once hue stops doing the work.

A red to green scaleThe category convention.
0.756low to good separation
ConfidantsAmber to teal.
0.770low to good separation

Both scales separate cleanly here, which is why picking colors on a normal-vision monitor does not catch the problem.

Color only. In the app, mood also shows up in the height of the bar and a label under each swatch, so none of this rests on color alone. Separation is the distance between the low and good swatches after simulation, so a higher number means the two stay further apart when hue stops helping.

Under deuteranopia the red to green scale scores 0.145 and ours scores 0.504. That is the difference between three steps you can still tell apart and three you cannot.

The other problem with red

Red means error. It is the color of a failed payment and a form you filled in wrong, and putting it on a low day makes the app the thing that decides the day went badly.

This is a known criticism of mood tracking, not our invention. Luke Stark studied how these interfaces are built and found that color hierarchies tying green to good and red to bad implicitly devalue negative emotional experiences. A low day is information. We are not grading it.

What we use instead

Amber, a warm grey, and teal. The three sit at almost the same lightness, so no swatch is louder than the others and none of them reads as the answer you were supposed to pick. All the separation is carried by hue, and the two ends sit 121 degrees apart across the blue-yellow axis, which is the axis red-green deficiency leaves intact.

Low#D98C33 · Amber, hue 66
Okay#9E9991 · Warm grey, hue 78
Good#40B2A8 · Teal, hue 187

That is the same reasoning behind the Okabe-Ito palette, the color-universal set that Nature Methods recommends for scientific figures. We landed 11 degrees from its orange and 21 degrees from its bluish green. Its reference pair scores 0.534 under deuteranopia against our 0.504, so we are within a rounding error of the standard without having copied it.

Color is never the only signal

Color separation gets you most of the way, and it is still a single point of failure. So mood is encoded three more times.

  • Bar height in the week view. A low day is a third of the track and a good day fills it, whatever color you see.
  • A label under each swatch when you are picking, and a thumb or minus glyph when space is tight.
  • A spoken label on every mood control, every calendar cell, and every day in the week strip, so the tracker works with VoiceOver.

That redundancy pays off well beyond color vision. It is also what keeps the tracker readable in bright sun and at the largest text sizes.

Why it ignores your accent color

Confidants ships 17 accent colors and the default is monochrome, which has no hue at all. If the mood colors followed your accent, anyone on the default would get three identical greys.

So they do not follow it. A mood is a state, not a preference, and it reads the same whatever you picked. The app makes the same call for toggle switches for the same reason.

Sources