Color blindness

Hey there,

Just a topic to collect some info about colors in Sonarr and colorblindness.

First off, I’m moderately deuteranomalous color-blind. Sometimes I realize it’s actually sever, but it could be much worse, at least I’m still trichromat.
This means I can still make out red and green but in fewer shades and it can be rather difficult at times. This applies to purple-blue, red-green, yellow-orange, red-brown and a large variety of shades.
When I put them next to each other I can discern there is a difference, but when seen apart I cannot accurately identify the color, so I rarely try.

FYI, 5% of the male population has this, so over 1350 users of Sonarr.

About 1% of the male population has more severe forms of color-blindness. From complete red-green color-blindness to an even smaller percentage that cannot see any color at all.

While working on Sonarr I kept my eyes on it to make sure the colors chosen didn’t impede color-blind people too much.
For example, the Missing (red) and Downloaded (green) colors on the calendar are still discernible to me, albeit borderline, primarily because the calendar tiles are large enough. On the vertical stripes on the Upcoming list Missing vs Downloaded is not discernible, not without close inspection.

However, that 1% category will not be able to for the main calendar tiles. And might even confuse Unmonitored (gray) with Unaired or Missing.
On Air vs Downloaded is easy even for me, but take away red entirely and those two colors are the same.

That said there are two ways to deal with it:

  • Install a browser extension to modify the css style (Stylebot for Chrome for example)
  • Add a color-blind option in Sonarr to apply those style changes.

This topic is to collect some screenshots and come up with a decent stylesheet.

Normal:

For me Missing and Downloaded is largely the same, the rest still okay for me

Simulated Deuteranomalous:

This is how I see it, hopefully anyway, lemme know what you see.

Simulated Severe form (just simulated both tritanope and deuteranope, not accurate but you get the idea):

Just to make a point how severe it can be. At this point I give up on colors and look purely at brightness. Without comparison I wouldn’t be able to pick out most of em.

The above simulations are not that accurate, just like it’s impossible to wrap a newspaper around a basketball and still be able to read all of it. But it gives an impression of the limitations of other people.

The chosen primary colors in Sonarr are sufficient to deal with most color-blind users, but the 1% needs extra help. Picking other colors will not help them, coz they won’t be able to tell them apart, or the other 1% won’t be able to. Best is to use patterns.

For example:

With vertical stripe for ‘missing’ (both Missing, and On Air)
With diagonal stripe for ‘unmonitored’.

The same vertical stripe may need to be applied to Unaired as well, since it’s missing too.

In any case, the intention is to add a single checkbox option to the UI section to enable the styles.

@markus101 What do you think.

I definitely think we need to handle this ourselves, we can’t expect someone to install a plugin to make it useful, especially when the resolution is pretty easy for us (at first thought).

Client or Server side saving of this setting?
Can we achieve the application with pure CSS (toggle a class on the body)?

I wanted to do it server side, just an single additional css with overrides. But toggling a global, like advanced-settings, is also possible. Could do both, server side setting but still use a body class.

I’ll donate again later today just to have this implemented :slight_smile:

Hi guys,

As I mentioned on Trello, I have issues discerning the difference between Missing and Unmonitored, and also On Air and Downloaded. It’s not too bad if they’re right next to each other, but if they’re separate it’s a bit of a crapshoot :smile:

I like the idea of the stripes, that’d work!

@simonk83

Could you let me know how emphasized the stripes need to be? Personally I would like it slightly less, for aesthetic reasons but obviously I want the stripes clear enough for us.

Switched from changing saturation to brightness -10:

And -5 brightness:

Also added stripes to Unaired Premiere and Unaired but that feels like a mistake when I look at it in grayscale. Makes Unaired similar to Missing and Unaired Premier similar to On Air. But maybe that isn’t a problem, coz Missing is in the past and Unaired in the future.

-5 seems like a bit too little, prolly should do -7. What do you think?
Prolly should make a full screen example…

That’s all of em. Lemme know if any of em is confusing or ugly. :slight_smile:

Yeah I agree that -5 isn’t quite enough.

The example looks fine to me though, awesome work, thanks heaps :smiley:

Interestingly that example was with -5. :smiley:

Haha, shows what I know! It looks good to me, I’d be happy with that. Easy to separate things at a glance, and that’s the main objective I suppose.

It’s been released on the develop branch.

Lemme know if there are other items that are worth tweaking for color-impaired.

Brilliant, thanks Taloth :slight_smile: