Bug 1655053 - updating color vision deficiency simulation in accessibility panel. r=jdescottes

* removing simulations for protanomaly, deuteranomaly and tritanomaly
* updating (fixing) the color matrices for protanopia, deuteranopia and tritanopia
* adding a matrix to simulate achromatopsia

Co-authored-by: Matthew Petroff <mozilla@mpetroff.net>

Differential Revision: https://phabricator.services.mozilla.com/D85508

devtools/client/accessibility/components/SimulationMenuButton.js

@@ -45,12 +45,10 @@ const TELEMETRY_SIMULATION_ACTIVATED =
   "devtools.accessibility.simulation_activated";
 const SIMULATION_MENU_LABELS = {
   NONE: "accessibility.filter.none",
-  [SIMULATION_TYPE.DEUTERANOMALY]: "accessibility.simulation.deuteranomaly",
+  [SIMULATION_TYPE.ACHROMATOPSIA]: "accessibility.simulation.achromatopsia",
-  [SIMULATION_TYPE.PROTANOMALY]: "accessibility.simulation.protanomaly",
   [SIMULATION_TYPE.PROTANOPIA]: "accessibility.simulation.protanopia",
   [SIMULATION_TYPE.DEUTERANOPIA]: "accessibility.simulation.deuteranopia",
   [SIMULATION_TYPE.TRITANOPIA]: "accessibility.simulation.tritanopia",
-  [SIMULATION_TYPE.TRITANOMALY]: "accessibility.simulation.tritanomaly",
   [SIMULATION_TYPE.CONTRAST_LOSS]: "accessibility.simulation.contrastLoss",
   DOCUMENTATION: "accessibility.documentation.label",
 };

devtools/client/accessibility/reducers/simulation.js

@@ -14,9 +14,7 @@ const { SIMULATE } = require("devtools/client/accessibility/constants");
  */
 function getInitialState() {
   return {
-    [SIMULATION_TYPE.PROTANOMALY]: false,
+    [SIMULATION_TYPE.ACHROMATOPSIA]: false,
-    [SIMULATION_TYPE.DEUTERANOMALY]: false,
-    [SIMULATION_TYPE.TRITANOMALY]: false,
     [SIMULATION_TYPE.PROTANOPIA]: false,
     [SIMULATION_TYPE.DEUTERANOPIA]: false,
     [SIMULATION_TYPE.TRITANOPIA]: false,

devtools/client/locales/en-US/accessibility.properties

@@ -265,14 +265,6 @@ accessibility.documentation.label=Documentation…
 # vision deficiencies.
 accessibility.simulation=Simulate:
 
-# LOCALIZATION NOTE (accessibility.simulation.deuteranomaly): This label is shown
-# in the "Simulate" menu in the accessibility panel and represent the deuteranomaly simulation option.
-accessibility.simulation.deuteranomaly=Deuteranomaly (low green)
-
-# LOCALIZATION NOTE (accessibility.simulation.protanomaly): This label is shown
-# in the "Simulate" menu in the accessibility panel and represent the protanomaly simulation option.
-accessibility.simulation.protanomaly=Protanomaly (low red)
-
 # LOCALIZATION NOTE (accessibility.simulation.protanopia): This label is shown
 # in the "Simulate" menu in the accessibility panel and represent the protanopia simulation option.
 accessibility.simulation.protanopia=Protanopia (no red)
@@ -285,12 +277,12 @@ accessibility.simulation.deuteranopia=Deuteranopia (no green)
 # in the "Simulate" menu in the accessibility panel and represent the tritanopia simulation option.
 accessibility.simulation.tritanopia=Tritanopia (no blue)
 
-# LOCALIZATION NOTE (accessibility.simulation.tritanomaly): This label is shown
-# in the "Simulate" menu in the accessibility panel and represent the tritanomaly simulation option.
-accessibility.simulation.tritanomaly=Tritanomaly (low blue)
-
 # LOCALIZATION NOTE (accessibility.simulation.contrastLoss): This label is shown
 # in the "Simulate" menu in the accessibility panel and represent the contrast loss simulation option.
 # It is also shown in the simulation menu button in the accessibility panel and represent the
 # contrast loss simulation option currently selected.
 accessibility.simulation.contrastLoss=Contrast loss
+
+# LOCALIZATION NOTE (accessibility.simulation.achromatopsia): This label is shown
+# in the "Simulate" menu in the accessibility panel and represent the achromatopsia simulation option.
+accessibility.simulation.achromatopsia=Achromatopsia (no color)

devtools/server/actors/accessibility/constants.js

@@ -7,9 +7,7 @@
 const {
   accessibility: {
     SIMULATION_TYPE: {
-      DEUTERANOMALY,
+      ACHROMATOPSIA,
-      PROTANOMALY,
-      TRITANOMALY,
       DEUTERANOPIA,
       PROTANOPIA,
       TRITANOPIA,
@@ -22,7 +20,8 @@ const {
  * Constants used in accessibility actors.
  */
 
-// Color blindness matrix values taken from https://github.com/eeejay/NoCoffee/blob/master/popup.js#L5-L10
+// Color blindness matrix values taken from Machado et al. (2009), https://doi.org/10.1109/TVCG.2009.113:
+// https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html
 // Contrast loss matrix values are for 50% contrast (see https://docs.rainmeter.net/tips/colormatrix-guide/,
 // and https://stackoverflow.com/questions/23865511/contrast-with-color-matrix). The matrices are flattened
 // 4x5 matrices, needed for docShell setColorMatrix method. i.e. A 4x5 matrix of the form:
@@ -34,62 +33,18 @@ const {
 //   [1, 6, 11, 16, 2, 7, 12, 17, 3, 8, 13, 18, 4, 9, 14, 19, 5, 10, 15, 20]
 const COLOR_TRANSFORMATION_MATRICES = {
   NONE: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0],
-  [PROTANOMALY]: [
+  [ACHROMATOPSIA]: [
-    0.817,
+    0.299,
-    0.333,
+    0.299,
+    0.299,
     0,
+    0.587,
+    0.587,
+    0.587,
     0,
-    0.183,
+    0.114,
-    0.667,
+    0.114,
-    0.125,
+    0.114,
-    0,
-    0,
-    0,
-    0.875,
-    0,
-    0,
-    0,
-    0,
-    1,
-    0,
-    0,
-    0,
-    0,
-  ],
-  [DEUTERANOMALY]: [
-    0.8,
-    0.258,
-    0,
-    0,
-    0.2,
-    0.742,
-    0.142,
-    0,
-    0,
-    0,
-    0.858,
-    0,
-    0,
-    0,
-    0,
-    1,
-    0,
-    0,
-    0,
-    0,
-  ],
-  [TRITANOMALY]: [
-    0.967,
-    0,
-    0,
-    0,
-    0.033,
-    0.733,
-    0.183,
-    0,
-    0,
-    0.267,
-    0.817,
     0,
     0,
     0,
@@ -101,17 +56,17 @@ const COLOR_TRANSFORMATION_MATRICES = {
     0,
   ],
   [PROTANOPIA]: [
-    0.567,
+    0.152286,
-    0.558,
+    0.114503,
+    -0.003882,
     0,
+    1.052583,
+    0.786281,
+    -0.048116,
     0,
-    0.433,
+    -0.204868,
-    0.442,
+    0.099216,
-    0.242,
+    1.051998,
-    0,
-    0,
-    0,
-    0.758,
     0,
     0,
     0,
@@ -123,17 +78,17 @@ const COLOR_TRANSFORMATION_MATRICES = {
     0,
   ],
   [DEUTERANOPIA]: [
-    0.625,
+    0.367322,
-    0.7,
+    0.280085,
+    -0.01182,
     0,
+    0.860646,
+    0.672501,
+    0.04294,
     0,
-    0.375,
+    -0.227968,
-    0.3,
+    0.047413,
-    0.3,
+    0.968881,
-    0,
-    0,
-    0,
-    0.7,
     0,
     0,
     0,
@@ -145,17 +100,17 @@ const COLOR_TRANSFORMATION_MATRICES = {
     0,
   ],
   [TRITANOPIA]: [
-    0.95,
+    1.255528,
+    -0.078411,
+    0.004733,
     0,
+    -0.076749,
+    0.930809,
+    0.691367,
     0,
-    0,
+    -0.178779,
-    0.05,
+    0.147602,
-    0.433,
+    0.3039,
-    0.475,
-    0,
-    0,
-    0.567,
-    0.525,
     0,
     0,
     0,

devtools/shared/constants.js

@@ -89,18 +89,14 @@ const SCORES = {
 
 // List of simulation types.
 const SIMULATION_TYPE = {
-  // Low red color blindness
-  PROTANOMALY: "PROTANOMALY",
-  // Low green color blindness
-  DEUTERANOMALY: "DEUTERANOMALY",
-  // Low blue color blindness
-  TRITANOMALY: "TRITANOMALY",
   // No red color blindness
   PROTANOPIA: "PROTANOPIA",
   // No green color blindness
   DEUTERANOPIA: "DEUTERANOPIA",
   // No blue color blindness
   TRITANOPIA: "TRITANOPIA",
+  // Absense of color vision
+  ACHROMATOPSIA: "ACHROMATOPSIA",
   // Low contrast
   CONTRAST_LOSS: "CONTRAST_LOSS",
 };

toolkit/components/telemetry/Scalars.yaml

@@ -2796,7 +2796,7 @@ devtools.accessibility:
     description: >
       Number of times accessibility simulation was activated (with mouse or keyboard)
       from the accessibility panel's toolbar. Keyed by the simulation type
-      (e.g. "DEUTERANOMALY").
+      (e.g. "DEUTERANOPIA").
     expires: never
     kind: uint
     keyed: true