This addresses colour-blindness issues, using contributed solution https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219

src/_locales/en/messages.json

@@ -163,6 +163,10 @@
     "message":"Make use of context menu where appropriate",
     "description":"English: Make use of context menu where appropriate"
   },
+  "settingsColorBlindPrompt":{
+    "message":"Color-blind friendly",
+    "description":"English: Color-blind friendly"
+  },
   "settingsAdvancedUserPrompt":{
     "message":"I am an advanced user (<a href='https:\/\/github.com\/gorhill\/uBlock\/wiki\/Advanced-user-features'>Required reading<\/a>)",
     "description":"English: "

src/css/popup.css

@@ -318,6 +318,8 @@ body.dirty #refresh:hover {
 #firewallContainer.minimized > div.isDomain > span:nth-of-type(4) {
     display: inline-block;
     }
+
+/* Small coloured label at the left of a row */
 #firewallContainer > div.allowed > span:nth-of-type(1):before,
 #firewallContainer > div.blocked > span:nth-of-type(1):before,
 #firewallContainer.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before,
@@ -335,20 +337,36 @@ body.dirty #refresh:hover {
 #firewallContainer.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before {
     background-color: rgb(0, 160, 0);
     }
+#firewallContainer.colorBlind > div.allowed > span:nth-of-type(1):before,
+#firewallContainer.colorBlind.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before {
+    background-color: rgb(255, 194, 57);
+    }
 #firewallContainer > div.blocked > span:nth-of-type(1):before,
 #firewallContainer.minimized > div.isDomain.totalBlocked > span:nth-of-type(1):before {
     background-color: rgb(192, 0, 0);
     }
+#firewallContainer.colorBlind > div.blocked > span:nth-of-type(1):before,
+#firewallContainer.colorBlind.minimized > div.isDomain.totalBlocked > span:nth-of-type(1):before {
+    background-color: rgb(0, 19, 110);
+    }
 #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);
     }
+
+/* Rule cells */
 #firewallContainer > div > span.aRule {
     background-color: rgba(0, 160, 0, 0.3);
     }
+#firewallContainer.colorBlind > div > span.aRule {
+    background-color: rgba(255, 194, 57, 0.4);
+    }
 #firewallContainer > div > span.bRule {
     background-color: rgba(192, 0, 0, 0.3);
     }
+#firewallContainer.colorBlind > div > span.bRule {
+    background-color: rgba(0, 19, 110, 0.4);
+    }
 #firewallContainer > div > span.nRule {
     background-color: rgba(96, 96, 96, 0.3);
     }
@@ -358,9 +376,15 @@ body.dirty #refresh:hover {
 #firewallContainer > div > span.aRule.ownRule {
     background-color: rgba(0, 160, 0, 1);
     }
+#firewallContainer.colorBlind > div > span.aRule.ownRule {
+    background-color: rgba(255, 194, 57, 1);
+    }
 #firewallContainer > div > span.bRule.ownRule {
     background-color: rgba(192, 0, 0, 1);
     }
+#firewallContainer.colorBlind > div > span.bRule.ownRule {
+    background-color: rgba(0, 19, 110, 1);
+    }
 #firewallContainer > div > span.nRule.ownRule {
     background-color: rgba(108, 108, 108, 1);
     }
@@ -384,12 +408,18 @@ body.dirty #refresh:hover {
 #actionSelector > span:nth-of-type(1) {
     background-color: rgb(0, 160, 0);
     }
+#actionSelector.colorBlind > span:nth-of-type(1) {
+    background-color: rgb(255, 194, 57);
+    }
 #actionSelector > span:nth-of-type(2) {
     background-color: rgb(108, 108, 108);
     }
 #actionSelector > span:nth-of-type(3) {
     background-color: rgb(192, 0, 0);
     }
+#actionSelector.colorBlind > span:nth-of-type(3) {
+    background-color: rgb(0, 19, 110);
+    }
 #firewallContainer span.aRule #actionSelector > span:nth-of-type(1),
 #firewallContainer span.nRule #actionSelector > span:nth-of-type(2),
 #firewallContainer span.bRule #actionSelector > span:nth-of-type(3) {

src/js/background.js

@@ -56,6 +56,7 @@ return {
         advancedUserEnabled: false,
         autoUpdate: true,
         collapseBlocked: true,
+        colorBlindFriendly: false,
         contextMenuEnabled: true,
         dynamicFilteringEnabled: false,
         experimentalEnabled: false,

src/js/messaging.js

@@ -208,6 +208,7 @@ var getStats = function(tabId, tabTitle) {
         advancedUserEnabled: µb.userSettings.advancedUserEnabled,
         appName: vAPI.app.name,
         appVersion: vAPI.app.version,
+        colorBlindFriendly: µb.userSettings.colorBlindFriendly,
         cosmeticFilteringSwitch: false,
         dfEnabled: µb.userSettings.dynamicFilteringEnabled,
         firewallPaneMinimized: µb.userSettings.firewallPaneMinimized,

src/js/popup.js

@@ -302,7 +302,9 @@ var updateAllFirewallCells = function() {
 var buildAllFirewallRows = function() {
     // Do this before removing the rows
     if ( dfHotspots === null ) {
-        dfHotspots = uDom('#actionSelector').on('click', 'span', setFirewallRuleHandler);
+        dfHotspots = uDom('#actionSelector')
+            .toggleClass('colorBlind', popupData.colorBlindFriendly)
+            .on('click', 'span', setFirewallRuleHandler);
     }
     dfHotspots.detach();
 
@@ -393,14 +395,14 @@ var renderPopup = function() {
 
     uDom('#appname').text(popupData.appName);
     uDom('#version').text(popupData.appVersion);
-    uDom('body').toggleClass('advancedUser', popupData.advancedUserEnabled);
-
-    uDom('body').toggleClass(
-        'off',
-        (popupData.pageURL === '') ||
-        (!popupData.netFilteringSwitch) ||
-        (popupData.pageHostname === 'behind-the-scene' && !popupData.advancedUserEnabled)
-    );
+    uDom('body')
+        .toggleClass('advancedUser', popupData.advancedUserEnabled)
+        .toggleClass(
+            'off',
+            (popupData.pageURL === '') ||
+            (!popupData.netFilteringSwitch) ||
+            (popupData.pageHostname === 'behind-the-scene' && !popupData.advancedUserEnabled)
+        );
 
     // If you think the `=== true` is pointless, you are mistaken
     uDom('#gotoLog').toggleClass('enabled', popupData.canRequestLog === true)
@@ -450,7 +452,9 @@ var renderPopup = function() {
     }
 
     uDom('#panes').toggleClass('dfEnabled', dfPaneVisible);
-    uDom('#firewallContainer').toggleClass('minimized', popupData.firewallPaneMinimized);
+    uDom('#firewallContainer')
+        .toggleClass('minimized', popupData.firewallPaneMinimized)
+        .toggleClass('colorBlind', popupData.colorBlindFriendly);
 
     // Build dynamic filtering pane only if in use
     if ( dfPaneVisible ) {

src/js/settings.js

@@ -180,6 +180,12 @@ var onUserSettingsReceived = function(details) {
             changeUserSettings('contextMenuEnabled', this.checked);
         });
 
+    uDom('#color-blind-friendly')
+        .prop('checked', details.colorBlindFriendly === true)
+        .on('change', function(){
+            changeUserSettings('colorBlindFriendly', this.checked);
+        });
+
     uDom('#advanced-user-enabled')
         .prop('checked', details.advancedUserEnabled === true)
         .on('change', function(){

src/settings.html

@@ -14,6 +14,7 @@
     <li><input id="collapse-blocked" type="checkbox"><label data-i18n="settingsCollapseBlockedPrompt" for="collapse-blocked"></label>
     <li><input id="icon-badge" type="checkbox"><label data-i18n="settingsIconBadgePrompt" for="icon-badge"></label>
     <li><input id="context-menu-enabled" type="checkbox"><label data-i18n="settingsContextMenuPrompt" for="context-menu-enabled"></label>
+    <li><input id="color-blind-friendly" type="checkbox"><label data-i18n="settingsColorBlindPrompt" for="color-blind-friendly"></label>
     <li><input id="advanced-user-enabled" type="checkbox"><label data-i18n="settingsAdvancedUserPrompt" for="advanced-user-enabled"></label>
     <!-- <li><input id="experimental-enabled" type="checkbox" disabled><label data-i18n="settingsExperimentalPrompt" for="experimental-enabled"></label> -->
     </ul>