Missing: a "color-blind friendly" setting

[gorhill]

No description provided.

[deaffob]

Yes please add this setting.... I'm using your µMatrix and it's like night and day for me who's green-red color blind...

[dekonnection]

+1

The extension is amazing, but dynamic filtering is also extremely frustrating for colorblind people like me (deuteranomaly).

[WyohKnott]

I am part of the 0.4% of deuteroanomalous so I'm interested in this (although it's not that bad for me).

I don't know much about it so here what I've gathered so far:

What needs to be targeted is deuteroanomalous (4.9% + 0.4% of the population) and deuteranopia (1.1% + < 1%). Protanopia and protanomalia both affect 1% of the male population but providing a color palette for deuteranopia should work with protanomalious people too. Tritanopia and tritanomalia prevalence is less than 1 per 1000.

There are tools to simulate protanopia and deuteranopia:

• Adobe Photoshop: by using View > Proof Setup > Deuteranopia
• Vischeck online: http://www.vischeck.com/vischeck/vischeckImage.php
• This excellent tool is designed to help choose complementary colours, but also have a Vision simulation function: http://paletton.com/

Here's what I have obtained with the popup colours:

• Normal vision: http://i.imgur.com/HEWkkyr.png
• What a deuteranope sees: http://i.imgur.com/0L1pEpJ.png

Various articles about the subject with recommendations:

• https://msdn.microsoft.com/en-us/library/bb263953.aspx
• http://jfly.iam.u-tokyo.ac.jp/color/
• http://help.adobe.com/en_US/creativesuite/cs/using/WS3F71DA01-0962-4b2e-B7FD-C956F8659BB3.html
• This tool ( http://www.snook.ca/technical/colour_contrast/colour.html ) is used to validate text colour over background colour against W3C WCAG 2.0 recommendations.

So either:

• create a colour palette not being based on red/green difference. For example this palette:
  https://color.adobe.com/Color-Blind-Safe-color-theme-880514/
• use patterns in the background colours. By using CSS3's "repeating-linear-gradient" for example (https://css-tricks.com/stripes-css/) or use symbols in the background to add information redundancy for colorblind people.

[WyohKnott]

Here's the colours I propose next to the current ones, in various colour-blind configuration.
Feedback would be appreciated.

Proposed colours:

• Allow: rgba(106, 140, 104, 1) / rgba(106, 140, 104, 0.4) / rgba(106, 140, 104, 0.75)
• Noop: rgba(0, 19, 110, 1) / rgba(0, 19, 110, 0.4) / rgba(0, 19, 110, 0.75)
• Block: rgba(255, 194, 57, 1) / rgba(255, 194, 57, 0.4) / rgba(255, 194, 57, 0.75)

[gorhill]

@WyohKnott awesome work, having an actual colorblind person contributing the solution is best. For uMatrix I was sort of left to my own devices, and not sure I picked the optimal solution from what I see here.

For my fork, I would just plainly go along with these colors, however with a change in the mapping: I would swap the blue and the almost completely unsaturated green, so as to keep the noop color as close as possible to the original one. What do you think?

[WyohKnott]

I haven't mapped them yet, it was just a test for how the shades would interact.
I was thinking:

• allow: yellowish-orange, it's the most bright of the three, so I was thinking of associating it with allow.
• noop: unsaturated green, as it is the most neutral in my opinion.
• block: navy blue, it's closer to night blue, which might be better to associate with an off setting.

[WyohKnott]

@gorhill There's one colour in the css that i'm not sure I've ever seen in the popup before so I didn't include it in my test:

#firewallContainer > div.allowed.blocked > span:nth-of-type(1):before,
#firewallContainer.minimized > div.isDomain.totalAllowed.totalBlocked > span:nth-of-type(1):before {
    background-color: rgb(192, 160, 0);
    }

In which context does div.allowed.blocked happen? I've never seen that orange shade before when using µBlock.

[gorhill]

@WyohKnott It's the little coloured label at the left of a row, which indicates whether all requests were blocked, allowed, or some blocked some allowed:

In the above picture, that label for entries for wired.com and adobedtm.com is yellowish. Note that this label is kind of redundant to the pluses/minuses in the right-most cells.

[RobotCaleb]

First, thanks for the color blind support. I'm color blind and am a strong advocate for not relying on color alone to convey meaningful information.

@WyohKnott mentioned "use patterns in the background colours. By using CSS3's "repeating-linear-gradient" for example (https://css-tricks.com/stripes-css/) or use symbols in the background to add information redundancy for colorblind people."

I'd love to see such a thing implemented. Further, just because you have colors that color blind people are more likely to differentiate doesn't mean that any meaning is applied to them. Especially without a legend anywhere.

Edit: I just realized I commented here, but have only looked at the colors chosen in uMatrix. I see you reference this issue from uMatrix, so presumably there's carryover.

[WyohKnott]

@RobotCaleb my tests with patterned background (not shown in this discussion) were not conclusive because the areas are small and it reduces the readability of the plus and minus signs.

I know the colours chosen don't convey their meaning, I've looked if there was a international implied standard like green = allowed, red = forbidden, but I couldn't find any information about that. Maybe we could add a legend explaining the colours meaning next to to the checkbox in the option panel.

[gorhill]

Especially without a legend anywhere

That was also true for the black/white scheme I chose in uMatrix before porting the new scheme. I don't remember ever anybody asking for a legend for that old scheme. It does seem natural to me to associate dark blue (night) with block and bright yellow (day) with allow.