Made colors accessible based on Web Content Accessibility Guidelines

Author: gracezhang89

color.js

@@ -19,34 +19,34 @@ function themeWindow_default(window) {
 }
 
 async function handleMessage(request, sender, sendResponse) {
-    
+
     let currentWindow = await browser.windows.getLastFocused();
 
     // set colors
     red = "#b02300";
     lightRed = "#df6142";
-    orange = "#da5b00";
-    lightOrange = "#e38847"
-    yellow = "#ffea00";
-    lightYellow = "#fff36d";
-    green = "#07a11e";
-    lightGreen = "#61d885";
-    blue = "#0065d1";
-    lightBlue = "#5a99dc";
+    orange = "#d3a116";
+    lightOrange = "#dfbb58"
+    yellow = "#f5f423";
+    lightYellow = "#fafa8e";
+    green = "#3f6215";
+    lightGreen = "#5e8231";
+    blue = "#5660fc";
+    lightBlue = "#727ae6";
     purple = "#8509eb";
-    lightPurple = "#a773d1";
-    pink = "#cf2a8d";
-    lightPink = "#d480b3";
+    lightPurple = "#a266cd";
+    pink = "#ba4a8e";
+    lightPink = "#cb76a9";
 
     switch (request.greeting) {
         case "Red":
             themeWindow(currentWindow, "white", red, lightRed);
             break;
         case "Orange":
-            themeWindow(currentWindow, "white", orange, lightOrange);
+            themeWindow(currentWindow, "black", orange, lightOrange);
             break;
         case "Yellow":
-            themeWindow(currentWindow, "white", yellow, lightYellow);
+            themeWindow(currentWindow, "black", yellow, lightYellow);
             break;
         case "Green":
             themeWindow(currentWindow, "white", green, lightGreen);

popup.css

@@ -31,51 +31,55 @@ body {
 }
 
 .button2 {
-  background-color: #da5b00;
+  color: black;
+  background-color: #d3a116;
 }
 
 .button2:hover {
-  background-color: #e38847;
+  color: black;
+  background-color: #dfbb58;
 }
 
 .button3 {
-  background-color: #ffea00;
+  color: black;
+  background-color: #f5f423;
 }
 
 .button3:hover {
-  background-color: #fff36d;
+  color: black;
+  background-color: #fafa8e;
 }
 
 .button4 {
-  background-color: #07a11e;
+  background-color: #3f6215;
 }
 
 .button4:hover {
-  background-color: #61d885;
+  background-color: #5e8231;
 }
 
 .button5 {
-  background-color: #0065d1;
+  background-color: #5660fc;
 }
 
 .button5:hover {
-  background-color: #5a99dc;
+  background-color: #727ae6;
 }
 
 .button6 {
-  background-color: #8509eb;
+  background-color: #8533c1;
 }
 
 .button6:hover {
-  background-color: #a773d1;
+  background-color: #a266cd;
 }
 
 .button7 {
-  background-color: #cf2a8d;
+  background-color: #ba4a8e;
 }
 
 .button7:hover {
-  background-color: #d480b3;
+  background-color: #cb76a9;
 }
 
 .button[type="reset"] {