From 819d68d403137df93eda018b10553e35e1e010fd Mon Sep 17 00:00:00 2001
From: ENT8R <info.ent8r@gmail.com>
Date: Sat, 19 May 2018 11:28:05 +0200
Subject: [PATCH 01/11] Add warning for low contrast and equal colors

---
 LICENSE.md                      |  1 +
 src/_locales/de/messages.json   |  8 ++++
 src/_locales/en/messages.json   |  8 ++++
 src/common/common.css           |  8 ++++
 src/common/common.js            |  4 +-
 src/common/img/warning-dark.svg |  6 +++
 src/common/variables.css        |  6 +++
 src/options.html                |  4 ++
 src/options.js                  | 78 +++++++++++++++++++++++++++++++--
 9 files changed, 118 insertions(+), 5 deletions(-)
 create mode 100644 src/common/img/warning-dark.svg

diff --git a/LICENSE.md b/LICENSE.md
index b315d508..79025ac9 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -95,6 +95,7 @@ The icons `assets/qr-icon*.svg` (used in `src/icons/icon-small-*.svg`) are made
 * [`common/img/info-dark.svg`](common/img/info-dark.svg) by Mozilla, license: [MPL v2.0](https://www.mozilla.org/en-US/MPL/2.0/)
 * [`common/img/info-light.svg`](common/img/info-light.svg) by Mozilla, license: [MPL v2.0](https://www.mozilla.org/en-US/MPL/2.0/)
 * [`common/img/open-in-new.svg`](common/img/open-in-new.svg) by Mozilla, license: [MPL v2.0](https://www.mozilla.org/en-US/MPL/2.0/)
+* [`common/img/warning-dark.svg`](common/img/warning-dark.svg) by Mozilla, license: [MPL v2.0](https://www.mozilla.org/en-US/MPL/2.0/)
 
 The MPLv2.0 license is reproduced below:
 
diff --git a/src/_locales/de/messages.json b/src/_locales/de/messages.json
index 641bd3bf..3f0ddafc 100644
--- a/src/_locales/de/messages.json
+++ b/src/_locales/de/messages.json
@@ -62,6 +62,14 @@
     "message": "Bist du sicher, dass du alle Optionen zurücksetzen willst?",
     "description": "The message shown, when the user is prompted to confirm the resetting of all options"
   },
+  "lowContrastRatio": {
+    "message": "Das Kontrastverhältnis zwischen der Farbe des QR-Codes und dem Hintergrund ist wahrscheinlich zu niedrig um von QR-Code-Scannern erkannt zu werden",
+    "desription": "The message shown when the contrast ratio is too low"
+  },
+  "sameColor": {
+    "message": "Die Farbe des QR-Codes und des Hintergrunds ist identisch. Das solltest du ändern!",
+    "description": "The message shown when the color for the QR code and the background are equal"
+  },
 
   // tips
   "tipYouLikeAddon": {
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index ac907fcb..e6ed6570 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -62,6 +62,14 @@
     "message": "Are you sure that you want to reset all options?",
     "description": "The message shown, when the user is prompted to confirm the resetting of all options"
   },
+  "lowContrastRatio": {
+    "message": "The contrast ratio between the QR code color and the background might be too low to be recognized by QR code readers",
+    "desription": "The message shown when the contrast ratio is too low"
+  },
+  "sameColor": {
+    "message": "The background and the foreground color are equal. You should change this!",
+    "description": "The message shown when the color for the QR code and the background are equal"
+  },
 
   // tips
   "tipYouLikeAddon": {
diff --git a/src/common/common.css b/src/common/common.css
index bbf1ad5f..49610d12 100644
--- a/src/common/common.css
+++ b/src/common/common.css
@@ -150,6 +150,11 @@ a:active {
   background-color: var(--green-50);
 }
 
+.warning {
+  color: var(--yellow-90);
+  background-color: var(--yellow-50);
+}
+
 /* message box action button */
 .message-action-button {
   margin-left: 8px;
@@ -188,6 +193,9 @@ a:active {
 .success::before {
   background-image: url('/common/img/check.svg');
 }
+.warning::before {
+  background-image: url('/common/img/warning-dark.svg');
+}
 
 .icon-dismiss {
   box-sizing: content-box;
diff --git a/src/common/common.js b/src/common/common.js
index b2ca10ff..44d29911 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -732,7 +732,7 @@ const MessageHandler = (function () {// eslint-disable-line no-unused-vars
         if (typeof args[0] === "boolean") {
             isDismissable = args.shift();
         }
-        if (typeof args[0] !== undefined && args[0].text !== undefined && args[0].action !== undefined) {
+        if (typeof args[0] !== "undefined" && args[0].text !== "undefined" && args[0].action !== "undefined") {
             actionButton = args.shift();
         }
 
@@ -770,7 +770,7 @@ const MessageHandler = (function () {// eslint-disable-line no-unused-vars
 
             elActionButton.textContent = browser.i18n.getMessage(actionButton.text) || actionButton.text;
             elActionButton.classList.remove("invisible");
-        } else {
+        } else if (elActionButton) {
             elActionButton.classList.add("invisible");
         }
 
diff --git a/src/common/img/warning-dark.svg b/src/common/img/warning-dark.svg
new file mode 100644
index 00000000..e6fa6e5c
--- /dev/null
+++ b/src/common/img/warning-dark.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="#333" d="M14.742 12.106L9.789 2.2a2 2 0 0 0-3.578 0l-4.953 9.91A2 2 0 0 0 3.047 15h9.905a2 2 0 0 0 1.79-2.894zM7 5a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0zm1 8.25A1.25 1.25 0 1 1 9.25 12 1.25 1.25 0 0 1 8 13.25z"></path>
+</svg>
diff --git a/src/common/variables.css b/src/common/variables.css
index a2545cd3..b64675a3 100644
--- a/src/common/variables.css
+++ b/src/common/variables.css
@@ -19,6 +19,12 @@
   --green-80: #006504;
   --green-90: #003706;
 
+  --yellow-50: #ffe900;
+  --yellow-60: #d7b600;
+  --yellow-70: #a47f00;
+  --yellow-80: #715100;
+  --yellow-90: #3e2800;
+
   --red-60: #d70022;
 
   --grey-20: #ededf0;
diff --git a/src/options.html b/src/options.html
index 89200389..4b73fd47 100644
--- a/src/options.html
+++ b/src/options.html
@@ -35,6 +35,10 @@
 				<span class="message-text">An error happened.</span>
 				<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
 			</div>
+			<div id="messageWarning" class="message-box warning invisible fade-hide">
+				<span class="message-text">There were some difficulties.</span>
+				<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
+			</div>
 		</div>
 		<form>
 			<ul>
diff --git a/src/options.js b/src/options.js
index 8138fb4f..7e115eff 100644
--- a/src/options.js
+++ b/src/options.js
@@ -19,7 +19,7 @@ const OptionHandler = (function () {
     /**
      * Applies option to element.
      *
-     * @name   OptionHandler.applyOptionToElementToElement
+     * @name   OptionHandler.applyOptionToElement
      * @function
      * @private
      * @param  {string} option string ob object ID
@@ -151,6 +151,8 @@ const OptionHandler = (function () {
                 // run for each option, which we know to handle
                 applyOptionLive("popupIconColored", res.popupIconColored);
                 applyOptionLive("qrCodeSize", res.qrCodeSize);
+                applyOptionLive("qrColor", res.qrColor);
+                applyOptionLive("qrBackgroundColor", res.qrBackgroundColor);
             });
         }
 
@@ -200,11 +202,81 @@ const OptionHandler = (function () {
 
         case "debugMode":
             Logger.setDebugMode(optionValue);
+            break;
+
+        case "qrColor":
+        case "qrBackgroundColor": {
+            const elQrColor = document.getElementById("qrColor");
+            const elQrBackgroundColor = document.getElementById("qrBackgroundColor");
+
+            const qrCodeColor = hexToRgb(elQrColor.value);
+            const qrCodeBackgroundColor = hexToRgb(elQrBackgroundColor.value);
+
+            const colorContrast = contrast(qrCodeColor, qrCodeBackgroundColor);
+            // TODO: what is the right value here?
+            if (colorContrast <= 4) {
+                MessageHandler.hideError();
+                MessageHandler.showWarning("lowContrastRatio", false);
+            } else {
+                MessageHandler.hideWarning();
+            }
+
+            if (elQrColor.value === elQrBackgroundColor.value) {
+                MessageHandler.hideWarning();
+                MessageHandler.showError("sameColor", false);
+            } else {
+                MessageHandler.hideError();
+            }
+        }
         }
 
         return null;
     }
 
+    /**
+     * Calculates the contrast between the QR code color and the background.
+     *
+     * @name   OptionHandler.contrast
+     * @function
+     * @private
+     * @param  {Array} rgb1
+     * @param  {Array} rgb2
+     * @returns {int}
+     */
+    function contrast(rgb1, rgb2) {
+        const colors = [rgb1[0], rgb1[1], rgb1[2], rgb2[0], rgb2[1], rgb2[2]];
+        for (let i = 0; i < colors.length; i++) {
+            // Formula: https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+            const c = colors[i] / 255;
+            // I'm using 0.04045 here instead of 0.03928 because 0.04045 is the number
+            // used in the actual sRGB standard.
+            // See also: https://github.com/w3c/wcag21/issues/815
+            colors[i] = c < 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+        }
+        // Formula: https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+        const l1 = 0.2126 * colors[0] + 0.7152 * colors[1] + 0.0722 * colors[2];
+        const l2 = 0.2126 * colors[3] + 0.7152 * colors[4] + 0.0722 * colors[5];
+        return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+    }
+
+    /**
+     * Converts a hex color string to RGB.
+     *
+     * @name   OptionHandler.hexToRgb
+     * @function
+     * @private
+     * @param  {string} hex
+     * @returns {Array}
+     */
+    function hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? [
+            parseInt(result[1], 16),
+            parseInt(result[2], 16),
+            parseInt(result[3], 16)
+        ] : null;
+    }
+
     /**
      * Saves all settings.
      *
@@ -475,9 +547,9 @@ const OptionHandler = (function () {
     }
 
     /**
-     * Localizes static strings in the HTML file.
+     * Initializes the options.
      *
-     * @name   Localizer.init
+     * @name   OptionHandler.init
      * @function
      * @returns {void}
      */

From 10bfa6bd4272553a18331454410d08d135db5891 Mon Sep 17 00:00:00 2001
From: ENT8R <info.ent8r@gmail.com>
Date: Sat, 19 May 2018 15:21:35 +0200
Subject: [PATCH 02/11] Add another if-check and remove 'typeof'

---
 src/common/common.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/common.js b/src/common/common.js
index 44d29911..9c32fbf4 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -732,7 +732,7 @@ const MessageHandler = (function () {// eslint-disable-line no-unused-vars
         if (typeof args[0] === "boolean") {
             isDismissable = args.shift();
         }
-        if (typeof args[0] !== "undefined" && args[0].text !== "undefined" && args[0].action !== "undefined") {
+        if (args[0] !== undefined && args[0].text !== "undefined" && args[0].action !== "undefined") {
             actionButton = args.shift();
         }
 
@@ -748,7 +748,7 @@ const MessageHandler = (function () {// eslint-disable-line no-unused-vars
         if (isDismissable === true && elDismissIcon) {
             // add an icon which dismisses the message if clicked
             elDismissIcon.classList.remove("invisible");
-        } else {
+        } else if (elDismissIcon) {
             elDismissIcon.classList.add("invisible");
         }
 

From 323ad34eb4ef130afceb59bdb989b35ed97314df Mon Sep 17 00:00:00 2001
From: ENT8R <info.ent8r@gmail.com>
Date: Sat, 19 May 2018 16:23:33 +0200
Subject: [PATCH 03/11] Fix suggestions by @rugk

---
 src/options.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/options.js b/src/options.js
index 7e115eff..4e25cee1 100644
--- a/src/options.js
+++ b/src/options.js
@@ -266,15 +266,18 @@ const OptionHandler = (function () {
      * @function
      * @private
      * @param  {string} hex
-     * @returns {Array}
+     * @returns {Array|null}
      */
     function hexToRgb(hex) {
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-        return result ? [
-            parseInt(result[1], 16),
-            parseInt(result[2], 16),
-            parseInt(result[3], 16)
-        ] : null;
+        if (result) {
+            return [
+                parseInt(result[1], 16),
+                parseInt(result[2], 16),
+                parseInt(result[3], 16)
+            ];
+        }
+        return null;
     }
 
     /**

From 1b534672d3316651c4c1412b49aef4c33a146c8d Mon Sep 17 00:00:00 2001
From: ENT8R <info.ent8r@gmail.com>
Date: Sat, 19 May 2018 18:14:06 +0200
Subject: [PATCH 04/11] Change the breakpoints when the warnings and errors are
 shown

---
 src/_locales/de/messages.json | 4 ++--
 src/_locales/en/messages.json | 2 +-
 src/options.js                | 5 ++---
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/_locales/de/messages.json b/src/_locales/de/messages.json
index 3f0ddafc..9f21f2a8 100644
--- a/src/_locales/de/messages.json
+++ b/src/_locales/de/messages.json
@@ -67,8 +67,8 @@
     "desription": "The message shown when the contrast ratio is too low"
   },
   "sameColor": {
-    "message": "Die Farbe des QR-Codes und des Hintergrunds ist identisch. Das solltest du ändern!",
-    "description": "The message shown when the color for the QR code and the background are equal"
+    "message": "Die Farbe des QR-Codes und des Hintergrunds ist zu ähnlich. Das solltest du ändern!",
+    "description": "The message shown when the color for the QR code and the background are nearly equal"
   },
 
   // tips
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index e6ed6570..3da2977a 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -67,7 +67,7 @@
     "desription": "The message shown when the contrast ratio is too low"
   },
   "sameColor": {
-    "message": "The background and the foreground color are equal. You should change this!",
+    "message": "The background and the foreground color are too similar. You should change this!",
     "description": "The message shown when the color for the QR code and the background are equal"
   },
 
diff --git a/src/options.js b/src/options.js
index 4e25cee1..d76c683f 100644
--- a/src/options.js
+++ b/src/options.js
@@ -213,15 +213,14 @@ const OptionHandler = (function () {
             const qrCodeBackgroundColor = hexToRgb(elQrBackgroundColor.value);
 
             const colorContrast = contrast(qrCodeColor, qrCodeBackgroundColor);
-            // TODO: what is the right value here?
-            if (colorContrast <= 4) {
+            if (colorContrast <= 6) {
                 MessageHandler.hideError();
                 MessageHandler.showWarning("lowContrastRatio", false);
             } else {
                 MessageHandler.hideWarning();
             }
 
-            if (elQrColor.value === elQrBackgroundColor.value) {
+            if (colorContrast <= 3) {
                 MessageHandler.hideWarning();
                 MessageHandler.showError("sameColor", false);
             } else {

From 9d6e4cb43bebb0e2e07dad18f7a2ea9c4eca364a Mon Sep 17 00:00:00 2001
From: ENT8R <info.ent8r@gmail.com>
Date: Tue, 22 May 2018 13:38:27 +0200
Subject: [PATCH 05/11] Added a button to automatically set the right color

---
 src/_locales/de/messages.json |  18 ++++--
 src/_locales/en/messages.json |  16 ++++--
 src/common/common.css         |  20 +++++++
 src/common/common.js          | 100 +++++++++++++++++++++++++++++++++-
 src/common/variables.css      |   6 ++
 src/options.html              |   9 +++
 src/options.js                |  90 ++++++++++--------------------
 7 files changed, 189 insertions(+), 70 deletions(-)

diff --git a/src/_locales/de/messages.json b/src/_locales/de/messages.json
index 9f21f2a8..56e59718 100644
--- a/src/_locales/de/messages.json
+++ b/src/_locales/de/messages.json
@@ -62,13 +62,21 @@
     "message": "Bist du sicher, dass du alle Optionen zurücksetzen willst?",
     "description": "The message shown, when the user is prompted to confirm the resetting of all options"
   },
-  "lowContrastRatio": {
-    "message": "Das Kontrastverhältnis zwischen der Farbe des QR-Codes und dem Hintergrund ist wahrscheinlich zu niedrig um von QR-Code-Scannern erkannt zu werden",
+  "lowContrastRatioInfo": {
+    "message": "Der QR-Code kann wahrscheinlich nicht von allen Scannern erkannt werden, weil der Kontrast zu niedrig ist.",
     "desription": "The message shown when the contrast ratio is too low"
   },
-  "sameColor": {
-    "message": "Die Farbe des QR-Codes und des Hintergrunds ist zu ähnlich. Das solltest du ändern!",
-    "description": "The message shown when the color for the QR code and the background are nearly equal"
+  "lowContrastRatioWarning": {
+    "message": "Das Kontrastverhältnis zwischen der Farbe des QR-Codes und dem Hintergrund ist wahrscheinlich zu niedrig um von den meisten QR-Code-Scannern erkannt zu werden",
+    "desription": "The warning shown when the contrast ratio is too low"
+  },
+  "lowContrastRatioError": {
+    "message": "Die Farbe des QR-Codes und des Hintergrunds ist zu ähnlich.",
+    "description": "The message shown when the color for the QR code and the background are equal"
+  },
+  "messageAutoSelectColorButton": {
+    "message": "Besten Kontrast berechnen",
+    "description": "The text of a button that sets a new color with a sufficient contrast."
   },
 
   // tips
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 3da2977a..ad6e1053 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -62,14 +62,22 @@
     "message": "Are you sure that you want to reset all options?",
     "description": "The message shown, when the user is prompted to confirm the resetting of all options"
   },
-  "lowContrastRatio": {
-    "message": "The contrast ratio between the QR code color and the background might be too low to be recognized by QR code readers",
+  "lowContrastRatioInfo": {
+    "message": "Your QR code may be hard to scan by some QR code readers because the contrast is too low.",
     "desription": "The message shown when the contrast ratio is too low"
   },
-  "sameColor": {
-    "message": "The background and the foreground color are too similar. You should change this!",
+  "lowContrastRatioWarning": {
+    "message": "The contrast ratio between the QR code color and the background might be too low to be recognized by the most QR code readers",
+    "desription": "The warning shown when the contrast ratio is too low"
+  },
+  "lowContrastRatioError": {
+    "message": "The background and the foreground color are too similar.",
     "description": "The message shown when the color for the QR code and the background are equal"
   },
+  "messageAutoSelectColorButton": {
+    "message": "Calculate best contrast",
+    "description": "The text of a button that sets a new color with a sufficient contrast."
+  },
 
   // tips
   "tipYouLikeAddon": {
diff --git a/src/common/common.css b/src/common/common.css
index 49610d12..76b34c66 100644
--- a/src/common/common.css
+++ b/src/common/common.css
@@ -87,6 +87,26 @@ a:active {
   background-color: var(--green-80);
 }
 
+.micro-button.warning {
+  background-color: var(--yellow-60);
+}
+.micro-button:hover.warning {
+  background-color: var(--yellow-70);
+}
+.micro-button:active.warning {
+  background-color: var(--yellow-80);
+}
+
+.micro-button.error {
+  background-color: var(--red-70);
+}
+.micro-button:hover.error {
+  background-color: var(--red-80);
+}
+.micro-button:active.error {
+  background-color: var(--red-90);
+}
+
 .micro-button:focus {
   box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3)
 }
diff --git a/src/common/common.js b/src/common/common.js
index 9c32fbf4..a70ad4fa 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -732,7 +732,7 @@ const MessageHandler = (function () {// eslint-disable-line no-unused-vars
         if (typeof args[0] === "boolean") {
             isDismissable = args.shift();
         }
-        if (args[0] !== undefined && args[0].text !== "undefined" && args[0].action !== "undefined") {
+        if (args[0] !== undefined && args[0].text !== undefined && args[0].action !== undefined) {
             actionButton = args.shift();
         }
 
@@ -1372,6 +1372,104 @@ const RandomTips = (function () {// eslint-disable-line no-unused-vars
     return me;
 })();
 
+const Colors = (() => { // eslint-disable-line no-unused-vars
+    const me = {};
+
+    /**
+     * Calculates the contrast between two colors
+     *
+     * @name   Colors.contrastRatio
+     * @function
+     * @param  {Array} rgb1
+     * @param  {Array} rgb2
+     * @returns {int}
+     */
+    me.contrastRatio = function(rgb1, rgb2) {
+        const l1 = luminance(rgb1);
+        const l2 = luminance(rgb2);
+        // Formula: https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+        return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+    };
+
+    /**
+     * Calculates the luminance of a given RGB color.
+     *
+     * @name   Colors.luminance
+     * @function
+     * @private
+     * @param  {Array} rgb
+     * @returns {Array|null}
+     */
+    function luminance(rgb) {
+        // Formula: https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+        let r = rgb[0] / 255;
+        let g = rgb[1] / 255;
+        let b = rgb[2] / 255;
+        // Note: I'm using 0.04045 here (instead of 0.03928) because 0.04045 is the
+        // number used in the actual sRGB standard.
+        // See also: https://github.com/w3c/wcag21/issues/815
+        r = r < 0.04045 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
+        g = g < 0.04045 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
+        b = b < 0.04045 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
+        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    }
+
+    /**
+     * Returns the complementary color of a given RGB array.
+     *
+     * @name   Colors.invertColor
+     * @function
+     * @param  {Array} rgb
+     * @returns {string}
+     */
+    me.invertColor = function(rgb) {
+        // invert color components
+        const r = (255 - rgb[0]).toString(16);
+        const g = (255 - rgb[1]).toString(16);
+        const b = (255 - rgb[2]).toString(16);
+        // pad each with zeros and return
+        return `#${padZero(r)}${padZero(g)}${padZero(b)}`;
+    };
+
+    /**
+     * Adds missing zeros in front of a string.
+     *
+     * @name   Colors.padZero
+     * @function
+     * @private
+     * @param  {string} string
+     * @param  {int} length
+     * @returns {string}
+     */
+    function padZero(string, length) {
+        length = length || 2;
+        const zeros = new Array(length).join("0");
+        return (zeros + string).slice(-length);
+    }
+
+    /**
+     * Converts a hex color string to RGB.
+     *
+     * @name   Colors.hexToRgb
+     * @function
+     * @param  {string} hex
+     * @returns {Array|null}
+     */
+    me.hexToRgb = function(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        if (result) {
+            return [
+                parseInt(result[1], 16),
+                parseInt(result[2], 16),
+                parseInt(result[3], 16)
+            ];
+        }
+        return null;
+    };
+
+    return me;
+})();
+
 // init modules
 AddonSettings.loadOptions();
 Logger.init();
diff --git a/src/common/variables.css b/src/common/variables.css
index b64675a3..ca5829f8 100644
--- a/src/common/variables.css
+++ b/src/common/variables.css
@@ -25,6 +25,12 @@
   --yellow-80: #715100;
   --yellow-90: #3e2800;
 
+  --red-50: #ff0039;
+  --red-60: #d70022;
+  --red-70: #a4000f;
+  --red-80: #5a0002;
+  --red-90: #3e0200;
+
   --red-60: #d70022;
 
   --grey-20: #ededf0;
diff --git a/src/options.html b/src/options.html
index 4b73fd47..f805b783 100644
--- a/src/options.html
+++ b/src/options.html
@@ -22,6 +22,9 @@
 			</div>
 			<div id="messageInfo" class="message-box info invisible fade-hide">
 				<span class="message-text">Some settings are managed by your administrator and cannot be changed.</span>
+				<a href="#">
+					<button class="message-action-button micro-button info invisible"></button>
+				</a>
 				<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
 			</div>
 			<div id="messageSuccess" class="message-box success invisible fade-hide">
@@ -33,10 +36,16 @@
 			</div>
 			<div id="messageError" class="message-box error invisible fade-hide">
 				<span class="message-text">An error happened.</span>
+				<a href="#">
+					<button class="message-action-button micro-button error invisible"></button>
+				</a>
 				<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
 			</div>
 			<div id="messageWarning" class="message-box warning invisible fade-hide">
 				<span class="message-text">There were some difficulties.</span>
+				<a href="#">
+					<button class="message-action-button micro-button warning invisible"></button>
+				</a>
 				<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
 			</div>
 		</div>
diff --git a/src/options.js b/src/options.js
index d76c683f..170d065a 100644
--- a/src/options.js
+++ b/src/options.js
@@ -4,6 +4,7 @@
 /* globals AddonSettings */
 /* globals MESSAGE_LEVEL, MessageHandler */
 /* globals RandomTips */
+/* globals Colors */
 
 const OptionHandler = (function () {
     const me = {};
@@ -209,21 +210,37 @@ const OptionHandler = (function () {
             const elQrColor = document.getElementById("qrColor");
             const elQrBackgroundColor = document.getElementById("qrBackgroundColor");
 
-            const qrCodeColor = hexToRgb(elQrColor.value);
-            const qrCodeBackgroundColor = hexToRgb(elQrBackgroundColor.value);
-
-            const colorContrast = contrast(qrCodeColor, qrCodeBackgroundColor);
-            if (colorContrast <= 6) {
-                MessageHandler.hideError();
-                MessageHandler.showWarning("lowContrastRatio", false);
+            const qrCodeColor = Colors.hexToRgb(elQrColor.value);
+            const qrCodeBackgroundColor = Colors.hexToRgb(elQrBackgroundColor.value);
+
+            const colorContrast = Colors.contrastRatio(qrCodeColor, qrCodeBackgroundColor);
+
+            const actionButton = {
+                text: "messageAutoSelectColorButton",
+                action: () => {
+                    const invertedColor = Colors.invertColor(qrCodeColor);
+                    browser.storage.sync.set({
+                        "qrBackgroundColor": invertedColor
+                    }).catch((error) => {
+                        Logger.logError("could not save option", option, ": ", error);
+                        MessageHandler.showError("couldNotSaveOption", true);
+                    }).finally(() => {
+                        applyOptionLive();
+                        elQrBackgroundColor.value = invertedColor;
+                    });
+                }
+            };
+
+            // breakpoints: https://github.com/rugk/offline-qr-code/pull/86#issuecomment-390426286
+            if (colorContrast <= 2) {
+                MessageHandler.showError("lowContrastRatioError", false, actionButton);
+            } else if (colorContrast <= 3) {
+                MessageHandler.showWarning("lowContrastRatioWarning", false, actionButton);
+            } else if (colorContrast <= 4.5) {
+                MessageHandler.showInfo("lowContrastRatioInfo", false, actionButton);
             } else {
+                MessageHandler.hideInfo();
                 MessageHandler.hideWarning();
-            }
-
-            if (colorContrast <= 3) {
-                MessageHandler.hideWarning();
-                MessageHandler.showError("sameColor", false);
-            } else {
                 MessageHandler.hideError();
             }
         }
@@ -232,53 +249,6 @@ const OptionHandler = (function () {
         return null;
     }
 
-    /**
-     * Calculates the contrast between the QR code color and the background.
-     *
-     * @name   OptionHandler.contrast
-     * @function
-     * @private
-     * @param  {Array} rgb1
-     * @param  {Array} rgb2
-     * @returns {int}
-     */
-    function contrast(rgb1, rgb2) {
-        const colors = [rgb1[0], rgb1[1], rgb1[2], rgb2[0], rgb2[1], rgb2[2]];
-        for (let i = 0; i < colors.length; i++) {
-            // Formula: https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-            const c = colors[i] / 255;
-            // I'm using 0.04045 here instead of 0.03928 because 0.04045 is the number
-            // used in the actual sRGB standard.
-            // See also: https://github.com/w3c/wcag21/issues/815
-            colors[i] = c < 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-        }
-        // Formula: https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
-        const l1 = 0.2126 * colors[0] + 0.7152 * colors[1] + 0.0722 * colors[2];
-        const l2 = 0.2126 * colors[3] + 0.7152 * colors[4] + 0.0722 * colors[5];
-        return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
-    }
-
-    /**
-     * Converts a hex color string to RGB.
-     *
-     * @name   OptionHandler.hexToRgb
-     * @function
-     * @private
-     * @param  {string} hex
-     * @returns {Array|null}
-     */
-    function hexToRgb(hex) {
-        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-        if (result) {
-            return [
-                parseInt(result[1], 16),
-                parseInt(result[2], 16),
-                parseInt(result[3], 16)
-            ];
-        }
-        return null;
-    }
-
     /**
      * Saves all settings.
      *

From de319c28fee3d4833e4993ff9a8fbc36bd56e16a Mon Sep 17 00:00:00 2001
From: rugk <rugk@posteo.de>
Date: Tue, 22 May 2018 14:00:38 +0200
Subject: [PATCH 06/11] Fix two display errors

1. red errors need a white text on the action button
2. if there is few space for the action button, it should not overflow
---
 src/common/common.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/common/common.css b/src/common/common.css
index 76b34c66..6e8a94ba 100644
--- a/src/common/common.css
+++ b/src/common/common.css
@@ -55,6 +55,7 @@ a:active {
 /* buttons https://design.firefox.com/photon/components/buttons.html */
 .micro-button {
   height: 24px;
+  height: auto;
   border-radius: 2px;
 
   padding-left: 8px;
@@ -99,6 +100,7 @@ a:active {
 
 .micro-button.error {
   background-color: var(--red-70);
+  color: var(--white-100);
 }
 .micro-button:hover.error {
   background-color: var(--red-80);

From 9dae10d14ce4dc6d12085bff82cc7ed3e185fb9f Mon Sep 17 00:00:00 2001
From: ENT8R <info.ent8r@gmail.com>
Date: Tue, 22 May 2018 14:22:41 +0200
Subject: [PATCH 07/11] Add some comments and remove a whitespace

---
 src/options.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/options.js b/src/options.js
index 170d065a..f2206278 100644
--- a/src/options.js
+++ b/src/options.js
@@ -222,7 +222,7 @@ const OptionHandler = (function () {
                     browser.storage.sync.set({
                         "qrBackgroundColor": invertedColor
                     }).catch((error) => {
-                        Logger.logError("could not save option", option, ": ", error);
+                        Logger.logError("could not save option", option, ":", error);
                         MessageHandler.showError("couldNotSaveOption", true);
                     }).finally(() => {
                         applyOptionLive();
@@ -233,10 +233,13 @@ const OptionHandler = (function () {
 
             // breakpoints: https://github.com/rugk/offline-qr-code/pull/86#issuecomment-390426286
             if (colorContrast <= 2) {
+                // show an error when nearly no QR code scanner can read it
                 MessageHandler.showError("lowContrastRatioError", false, actionButton);
             } else if (colorContrast <= 3) {
+                // show a warning when approx. 50% of the QR code scanners can read it
                 MessageHandler.showWarning("lowContrastRatioWarning", false, actionButton);
             } else if (colorContrast <= 4.5) {
+                // show only an info when the contrast is low but most of the scanners can still read it
                 MessageHandler.showInfo("lowContrastRatioInfo", false, actionButton);
             } else {
                 MessageHandler.hideInfo();
@@ -307,7 +310,7 @@ const OptionHandler = (function () {
         browser.storage.sync.set({
             [option]: optionValue
         }).catch((error) => {
-            Logger.logError("could not save option", option, ": ", error);
+            Logger.logError("could not save option", option, ":", error);
             MessageHandler.showError("couldNotSaveOption", true);
         });
     }

From 7627bebf4905c79a740f472e776c95b08ad27db3 Mon Sep 17 00:00:00 2001
From: ENT8R <info.ent8r@gmail.com>
Date: Tue, 22 May 2018 14:37:09 +0200
Subject: [PATCH 08/11] Reword message, use constants for breakpoints, adjust
 comments

---
 src/_locales/de/messages.json |  2 +-
 src/common/common.js          |  6 ++++++
 src/options.js                | 12 ++++++------
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/_locales/de/messages.json b/src/_locales/de/messages.json
index bc449440..546183bb 100644
--- a/src/_locales/de/messages.json
+++ b/src/_locales/de/messages.json
@@ -79,7 +79,7 @@
     "desription": "The message shown when the contrast ratio is too low"
   },
   "lowContrastRatioWarning": {
-    "message": "Das Kontrastverhältnis zwischen der Farbe des QR-Codes und dem Hintergrund ist wahrscheinlich zu niedrig um von den meisten QR-Code-Scannern erkannt zu werden",
+    "message": "Der Kontrast zwischen der Farbe des QR-Codes und dessen Hintergrund ist zu niedrig um von den meisten QR-Code-Scannern erkannt zu werden",
     "desription": "The warning shown when the contrast ratio is too low"
   },
   "lowContrastRatioError": {
diff --git a/src/common/common.js b/src/common/common.js
index a70ad4fa..6f8f23f1 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -1375,6 +1375,12 @@ const RandomTips = (function () {// eslint-disable-line no-unused-vars
 const Colors = (() => { // eslint-disable-line no-unused-vars
     const me = {};
 
+    me.ContrastBreakpoints = {
+        A: 2,
+        AA: 3,
+        AAA: 4.5,
+    };
+
     /**
      * Calculates the contrast between two colors
      *
diff --git a/src/options.js b/src/options.js
index f2206278..0c165864 100644
--- a/src/options.js
+++ b/src/options.js
@@ -232,14 +232,14 @@ const OptionHandler = (function () {
             };
 
             // breakpoints: https://github.com/rugk/offline-qr-code/pull/86#issuecomment-390426286
-            if (colorContrast <= 2) {
-                // show an error when nearly no QR code scanner can read it
+            if (colorContrast <= Colors.ContrastBreakpoints.A) {
+                // show an error when nearly no QR code scanner can read it (WCAG 2.0 A)
                 MessageHandler.showError("lowContrastRatioError", false, actionButton);
-            } else if (colorContrast <= 3) {
-                // show a warning when approx. 50% of the QR code scanners can read it
+            } else if (colorContrast <= Colors.ContrastBreakpoints.AA) {
+                // show a warning when approx. 50% of the QR code scanners can read it (WCAG 2.0 AA)
                 MessageHandler.showWarning("lowContrastRatioWarning", false, actionButton);
-            } else if (colorContrast <= 4.5) {
-                // show only an info when the contrast is low but most of the scanners can still read it
+            } else if (colorContrast <= Colors.ContrastBreakpoints.AAA) {
+                // show only an info when the contrast is low but most of the scanners can still read it (WCAG 2.0 AAA)
                 MessageHandler.showInfo("lowContrastRatioInfo", false, actionButton);
             } else {
                 MessageHandler.hideInfo();

From 39cc907e9a50091a7972032d5428c014fcaa0d22 Mon Sep 17 00:00:00 2001
From: rugk <rugk@posteo.de>
Date: Tue, 22 May 2018 14:55:46 +0200
Subject: [PATCH 09/11] Fix micro button display issues

See https://github.com/FirefoxUX/photon/issues/305
---
 src/common/common.css | 17 +++++++++++++++--
 src/options.css       |  2 +-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/common/common.css b/src/common/common.css
index 6e8a94ba..c62cb501 100644
--- a/src/common/common.css
+++ b/src/common/common.css
@@ -54,8 +54,7 @@ a:active {
 
 /* buttons https://design.firefox.com/photon/components/buttons.html */
 .micro-button {
-  height: 24px;
-  height: auto;
+  min-height: 24px;
   border-radius: 2px;
 
   padding-left: 8px;
@@ -66,6 +65,20 @@ a:active {
   padding-bottom: 2px;
 
   box-sizing: content-box;
+
+  /* do not break over multiple lines */
+  /* white-space: nowrap; */
+  height: auto; /* currently, we rather prefer breaking until https://github.com/rugk/offline-qr-code/issues/12 is done */
+}
+
+/* use light color for dark backgrounds */
+.micro-button:hover.success,
+.micro-button:active.success,
+.micro-button:hover.warning,
+.micro-button:active.warning,
+.micro-button:hover.error,
+.micro-button:active.error {
+  color: var(--white-100);
 }
 
 .micro-button.info {
diff --git a/src/options.css b/src/options.css
index 3bd10409..f9f3fde7 100644
--- a/src/options.css
+++ b/src/options.css
@@ -1,4 +1,4 @@
-body {
+body, .micro-button {
   /* the style the other options in the settings pane use */
   font-size: 1.25rem; /* TODO: adjust to font size on mobile */
   color: #333;

From 496edca650694f2f366a0f7df10649113939f460 Mon Sep 17 00:00:00 2001
From: rugk <rugk@posteo.de>
Date: Tue, 22 May 2018 15:18:56 +0200
Subject: [PATCH 10/11] Adjust contrast definition

Small usage change: now uses 3.1 instead 3 for warning, but that should
hardly matter.
---
 src/common/common.js | 24 ++++++++++++++++++++----
 src/options.js       | 12 ++++++------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/common/common.js b/src/common/common.js
index 6f8f23f1..d6698a0e 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -1375,10 +1375,26 @@ const RandomTips = (function () {// eslint-disable-line no-unused-vars
 const Colors = (() => { // eslint-disable-line no-unused-vars
     const me = {};
 
-    me.ContrastBreakpoints = {
-        A: 2,
-        AA: 3,
-        AAA: 4.5,
+    /**
+     * Some breakpoints for specific color ratios.
+     *
+     * This includes definitions from WCAG and some custom ones.
+     *
+     * @name Colors.CONTRAST_RATIO
+     * @type {object} with integers
+     * @const
+     * @default
+     */
+    me.CONTRAST_RATIO = {
+        WAY_TOO_LOW: 2,
+        // WCAG 2.1 AA text: https://www.w3.org/TR/WCAG/#contrast-minimum
+        LARGE_AA: 3.1,
+        SMALL_AA: 4.5,
+        // WCAG 2.1 AAA text: https://www.w3.org/TR/WCAG/#contrast-enhanced
+        LARGE_AAA: 4.5,
+        SMALL_AAA: 7.5,
+        // WCAG 2.1 AA non-text: https://www.w3.org/TR/WCAG/#non-text-contrast
+        NON_TEXT_AA: 3.1
     };
 
     /**
diff --git a/src/options.js b/src/options.js
index 0c165864..9879bcc7 100644
--- a/src/options.js
+++ b/src/options.js
@@ -232,14 +232,14 @@ const OptionHandler = (function () {
             };
 
             // breakpoints: https://github.com/rugk/offline-qr-code/pull/86#issuecomment-390426286
-            if (colorContrast <= Colors.ContrastBreakpoints.A) {
-                // show an error when nearly no QR code scanner can read it (WCAG 2.0 A)
+            if (colorContrast <= Colors.CONTRAST_RATIO.WAY_TOO_LOW) {
+                // show an error when nearly no QR code scanner can read it
                 MessageHandler.showError("lowContrastRatioError", false, actionButton);
-            } else if (colorContrast <= Colors.ContrastBreakpoints.AA) {
-                // show a warning when approx. 50% of the QR code scanners can read it (WCAG 2.0 AA)
+            } else if (colorContrast <= Colors.CONTRAST_RATIO.LARGE_AA) {
+                // show a warning when approx. 50% of the QR code scanners can read it
                 MessageHandler.showWarning("lowContrastRatioWarning", false, actionButton);
-            } else if (colorContrast <= Colors.ContrastBreakpoints.AAA) {
-                // show only an info when the contrast is low but most of the scanners can still read it (WCAG 2.0 AAA)
+            } else if (colorContrast <= Colors.CONTRAST_RATIO.LARGE_AAA) {
+                // show only an info when the contrast is low but most of the scanners can still read it
                 MessageHandler.showInfo("lowContrastRatioInfo", false, actionButton);
             } else {
                 MessageHandler.hideInfo();

From 33a661ae2615ef001199b9ee1f7ed5920c8dfd17 Mon Sep 17 00:00:00 2001
From: ENT8R <info.ent8r@gmail.com>
Date: Tue, 29 May 2018 14:14:27 +0200
Subject: [PATCH 11/11] Fix an issue where multiple messages where shown

---
 src/options.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/options.js b/src/options.js
index 9879bcc7..20791da4 100644
--- a/src/options.js
+++ b/src/options.js
@@ -234,12 +234,18 @@ const OptionHandler = (function () {
             // breakpoints: https://github.com/rugk/offline-qr-code/pull/86#issuecomment-390426286
             if (colorContrast <= Colors.CONTRAST_RATIO.WAY_TOO_LOW) {
                 // show an error when nearly no QR code scanner can read it
+                MessageHandler.hideInfo();
+                MessageHandler.hideWarning();
                 MessageHandler.showError("lowContrastRatioError", false, actionButton);
             } else if (colorContrast <= Colors.CONTRAST_RATIO.LARGE_AA) {
                 // show a warning when approx. 50% of the QR code scanners can read it
+                MessageHandler.hideInfo();
+                MessageHandler.hideError();
                 MessageHandler.showWarning("lowContrastRatioWarning", false, actionButton);
             } else if (colorContrast <= Colors.CONTRAST_RATIO.LARGE_AAA) {
                 // show only an info when the contrast is low but most of the scanners can still read it
+                MessageHandler.hideWarning();
+                MessageHandler.hideError();
                 MessageHandler.showInfo("lowContrastRatioInfo", false, actionButton);
             } else {
                 MessageHandler.hideInfo();