--- a/mail/base/content/glodaFacet.js
+++ b/mail/base/content/glodaFacet.js
@@ -1,16 +1,17 @@
 /* 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/. */
 
 /* global HTMLElement, DateFacetVis, FacetContext, glodaFacetStrings, FacetUtils, PluralForm */
 /* global logException, Gloda */
 
 var {MailServices} = ChromeUtils.import("resource:///modules/MailServices.jsm");
+var {Windows8WindowFrameColor} = ChromeUtils.import("resource:///modules/Windows8WindowFrameColor.jsm");
 
 class MozFacetDate extends HTMLElement {
   get build() {
     return this.buildFunc;
   }
 
   get brushItems() {
     return (items) => this.vis.hoverItems(items);
@@ -1526,18 +1527,23 @@ class MozFacetResultMessage extends HTML
       }
     }
 
     // - Tags
     let tagsNode = this.tags;
     if ("tags" in message && message.tags.length) {
       for (let tag of message.tags) {
         let tagNode = document.createElement("span");
-        let colorClass = "blc-" + MailServices.tags.getColorForKey(tag.key).substr(1);
-        tagNode.setAttribute("class", "message-tag tag " + colorClass);
+        let color = MailServices.tags.getColorForKey(tag.key);
+        let textColor = "black";
+        if (!Windows8WindowFrameColor.isColorContrastEnough(color)) {
+          textColor = "white";
+        }
+        tagNode.setAttribute("class", "message-tag");
+        tagNode.setAttribute("style", "color: " + textColor + "; background-color: " + color + ";");
         tagNode.textContent = tag.tag;
         tagsNode.appendChild(tagNode);
       }
     }
 
     // - Body
     if (message.indexedBodyText) {
       let bodyText = message.indexedBodyText;

--- a/mail/base/content/glodaFacetView.js
+++ b/mail/base/content/glodaFacetView.js
@@ -12,16 +12,17 @@
  *  get it wrong and it may eventually want to migrate.
  */
 
 var { Log4Moz } = ChromeUtils.import("resource:///modules/gloda/log4moz.js");
 var { StringBundle } = ChromeUtils.import("resource:///modules/StringBundle.js");
 var { PluralForm } = ChromeUtils.import("resource://gre/modules/PluralForm.jsm");
 var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
 var { MailServices } = ChromeUtils.import("resource:///modules/MailServices.jsm");
+var { Windows8WindowFrameColor } = ChromeUtils.import("resource:///modules/Windows8WindowFrameColor.jsm");
 var {
   logObject,
   logException,
 } = ChromeUtils.import("resource:///modules/errUtils.js");
 
 var { Gloda } = ChromeUtils.import("resource:///modules/gloda/public.js");
 var {
   FacetDriver,
@@ -91,18 +92,23 @@ const QueryExplanation = {
             "glodaFacetView.constraints.query.involves.label");
           involvesLabel = involvesLabel.replace("#1", constraint[2].value);
           spanify(involvesLabel, "explanation-query-involves");
         } else if (constraint[1].attributeName == "tag") {
           const tagLabel = glodaFacetStrings.get(
             "glodaFacetView.constraints.query.tagged.label");
           const tag = constraint[2];
           const tagNode = document.createElement("span");
-          const colorClass = "blc-" + MailServices.tags.getColorForKey(tag.key).substr(1);
-          tagNode.setAttribute("class", "message-tag tag " + colorClass);
+          const color = MailServices.tags.getColorForKey(tag.key);
+          let textColor = "black";
+          if (!Windows8WindowFrameColor.isColorContrastEnough(color)) {
+            textColor = "white";
+          }
+          tagNode.setAttribute("class", "message-tag");
+          tagNode.setAttribute("style", "color: " + textColor + "; background-color: " + color + ";");
           tagNode.textContent = tag.tag;
           spanify(tagLabel, "explanation-query-tagged");
           this.node.appendChild(tagNode);
         }
       }
       label = label + constraintStrings.join(", "); // XXX l10n?
     } catch (e) {
       logException(e);

--- a/mail/base/content/glodaFacetView.xhtml
+++ b/mail/base/content/glodaFacetView.xhtml
@@ -13,18 +13,16 @@
 %facetViewDTD;
 ]>
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:html="http://www.w3.org/1999/xhtml"
       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       version="-//W3C//DTD XHTML 1.1//EN"
       dir="&locale.dir;">
 <head>
-  <link rel="stylesheet" media="screen" type="text/css"
-        href="chrome://messenger/skin/tagColors.css"/>
   <!-- Themes -->
   <link rel="stylesheet"
         href="chrome://messenger/skin/glodaFacetView.css"
         type="text/css"/>
   <!-- Custom elements -->
   <script type="application/javascript"
           src="chrome://messenger/content/glodaFacet.js"></script>
   <!-- Global Context -->

--- a/mail/base/content/mailWidgets.js
+++ b/mail/base/content/mailWidgets.js
@@ -11,16 +11,17 @@
 /* global gFolderDisplay */
 /* global MozElementMixin */
 /* global BaseControlMixin */
 
 var {Services} = ChromeUtils.import("resource://gre/modules/Services.jsm");
 var {MailUtils} = ChromeUtils.import("resource:///modules/MailUtils.jsm");
 var {MailServices} = ChromeUtils.import("resource:///modules/MailServices.jsm");
 var {DBViewWrapper} = ChromeUtils.import("resource:///modules/DBViewWrapper.jsm");
+var { Windows8WindowFrameColor } = ChromeUtils.import("resource:///modules/Windows8WindowFrameColor.jsm");
 
 class MozMailHeaderfield extends MozXULElement {
   connectedCallback() {
     this.setAttribute("context", "copyPopup");
     this.classList.add("headerValue");
   }
 
   set headerValue(val) {
@@ -69,21 +70,26 @@ class MozMailHeaderfieldTags extends Moz
         // if we got a bad tag name, getTagForKey will throw an exception, skip it
         // and go to the next one.
         tagName = MailServices.tags.getTagForKey(tagsArray[i]);
       } catch (ex) {
         continue;
       }
 
       let color = MailServices.tags.getColorForKey(tagsArray[i]);
+      let textColor = "black";
+      if (!Windows8WindowFrameColor.isColorContrastEnough(color)) {
+        textColor = "white";
+      }
 
       // now create a label for the tag name, and set the color
       const label = document.createElement("label");
       label.setAttribute("value", tagName);
-      label.className = "tagvalue blc-" + color.substr(1);
+      label.className = "tagvalue";
+      label.setAttribute("style", "color: " + textColor + "; background-color: " + color + ";");
 
       this.appendChild(label);
     }
   }
 }
 
 class MozMailNewsgroup extends MozXULElement {
   connectedCallback() {

--- a/mail/base/content/mailWindowOverlay.js
+++ b/mail/base/content/mailWindowOverlay.js
@@ -987,17 +987,17 @@ function InitMessageTags(menuPopup) {
     var newMenuItem = document.createElement("menuitem");
     SetMessageTagLabel(newMenuItem, i + 1, taginfo.tag);
     newMenuItem.setAttribute("value", taginfo.key);
     newMenuItem.setAttribute("type", "checkbox");
     newMenuItem.setAttribute("checked", removeKey);
     newMenuItem.setAttribute("oncommand", "ToggleMessageTagMenu(event.target);");
     var color = taginfo.color;
     if (color)
-      newMenuItem.setAttribute("class", "lc-" + color.substr(1));
+      newMenuItem.setAttribute("style", "color: " + color + ";");
     menuPopup.appendChild(newMenuItem);
   }
 }
 
 function InitRecentlyClosedTabsPopup(menuPopup) {
   let tabs = document.getElementById("tabmail").recentlyClosedTabs;
 
   // show Popup only when there are restorable tabs.

--- a/mail/base/content/msgMail3PaneWindow.js
+++ b/mail/base/content/msgMail3PaneWindow.js
@@ -431,17 +431,17 @@ function OnLoadMessenger() {
   UpdateMailPaneConfig(false);
   CompactTheme.init();
 
   if (AppConstants.platform == "win") {
     // On Win8 set an attribute when the window frame color is too dark for black text.
     if (window.matchMedia("(-moz-os-version: windows-win8)").matches &&
         window.matchMedia("(-moz-windows-default-theme)").matches) {
       let {Windows8WindowFrameColor} = ChromeUtils.import("resource:///modules/Windows8WindowFrameColor.jsm");
-      let windowFrameColor = new Color(Windows8WindowFrameColor.get());
+      let windowFrameColor = new Color(...Windows8WindowFrameColor.get());
       // Default to black for foreground text.
       if (!windowFrameColor.isContrastRatioAcceptable(new Color(0, 0, 0))) {
         document.documentElement.setAttribute("darkwindowframe", "true");
       }
     } else if (AppConstants.isPlatformAndVersionAtLeast("win", "10")) {
       // 17763 is the build number of Windows 10 version 1809
       if (getWindowsVersionInfo().buildNumber < 17763) {
         document.documentElement.setAttribute("always-use-accent-color-for-window-border", "");

--- a/mail/base/content/multimessageview.js
+++ b/mail/base/content/multimessageview.js
@@ -5,16 +5,18 @@
 var {XPCOMUtils} = ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
 var { Gloda } = ChromeUtils.import("resource:///modules/gloda/gloda.js");
 var {
   mimeMsgToContentSnippetAndMeta,
 } = ChromeUtils.import("resource:///modules/gloda/connotent.js");
 var { MsgHdrToMimeMessage } = ChromeUtils.import("resource:///modules/gloda/mimemsg.js");
 var {DisplayNameUtils} = ChromeUtils.import("resource:///modules/DisplayNameUtils.jsm");
 var {MailServices} = ChromeUtils.import("resource:///modules/MailServices.jsm");
+var {Windows8WindowFrameColor} = ChromeUtils.import("resource:///modules/Windows8WindowFrameColor.jsm");
+
 var {
   PluralStringFormatter,
   makeFriendlyDateAgo,
 } = ChromeUtils.import("resource:///modules/templateUtils.js");
 
 var gMessenger = Cc["@mozilla.org/messenger;1"]
                    .createInstance(Ci.nsIMessenger);
 
@@ -354,21 +356,24 @@ MultiMessageSummary.prototype = {
     let sortedTags = [...aTags];
     sortedTags.sort(function(a, b) {
       return a.key.localeCompare(b.key) ||
              a.ordinal.localeCompare(b.ordinal);
     });
 
     for (let tag of sortedTags) {
       let tagNode = document.createElement("span");
-      // See tagColors.css.
       let color = MailServices.tags.getColorForKey(tag.key);
-      let colorClass = "blc-" + color.substr(1);
+      let textColor = "black";
+      if (!Windows8WindowFrameColor.isColorContrastEnough(color)) {
+        textColor = "white";
+      }
 
-      tagNode.classList.add("tag", colorClass);
+      tagNode.className = "tag";
+      tagNode.setAttribute("style", "color: " + textColor + "; background-color: " + color + ";");
       tagNode.dataset.tag = tag.tag;
       tagNode.textContent = tag.tag;
       aTagsNode.appendChild(tagNode);
     }
   },
 
   /**
    * Compute the size of the messages in the selection and display it in the

--- a/mail/base/content/multimessageview.xhtml
+++ b/mail/base/content/multimessageview.xhtml
@@ -24,18 +24,16 @@
     <link rel="stylesheet" media="screen" type="text/css"
           href="chrome://messenger/skin/primaryToolbar.css"/>
     <link rel="stylesheet" media="screen" type="text/css"
           href="chrome://messenger/skin/messageHeader.css"/>
     <link rel="stylesheet" media="screen, print" type="text/css"
           href="chrome://messenger/skin/multimessageview.css"/>
     <link rel="stylesheet" media="print" type="text/css"
           href="chrome://messenger/content/multimessageview_print.css"/>
-    <link rel="stylesheet" media="screen, print" type="text/css"
-          href="chrome://messenger/skin/tagColors.css"/>
     <title>&window.title;</title>
     <script type="application/javascript"
             src="chrome://messenger/content/multimessageview.js"/>
   </head>
   <body>
     <div id="heading_wrapper">
       <xul:toolbox id="header-view-toolbox" class="inline-toolbox"
                    labelalign="end"

--- a/mail/base/modules/QuickFilterManager.jsm
+++ b/mail/base/modules/QuickFilterManager.jsm
@@ -877,20 +877,20 @@ var TagFacetingFilter = {
           button.setAttribute("checked", "true");
           if (!keywordMap[tag.key])
             button.setAttribute("inverted", "true");
         }
         button.setAttribute("label", tag.tag);
         button.setAttribute("value", tag.key);
         let color = tag.color;
         // everybody always gets to be an qfb-tag-button.
-        if (color)
-          button.setAttribute("class", "toolbarbutton-1 qfb-tag-button lc-" + color.substr(1));
-        else
           button.setAttribute("class", "toolbarbutton-1 qfb-tag-button");
+        if (color) {
+          button.setAttribute("style", "color: " + color + " !important;");
+        }
         tagbar.appendChild(button);
       }
     }
     tagbar.collapsed = !addCount;
   },
 };
 QuickFilterManager.defineFilter(TagFacetingFilter);
 

--- a/mail/base/modules/Windows8WindowFrameColor.jsm
+++ b/mail/base/modules/Windows8WindowFrameColor.jsm
@@ -2,16 +2,17 @@
  * 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/. */
 
 "use strict";
 
 this.EXPORTED_SYMBOLS = ["Windows8WindowFrameColor"];
 
 const {WindowsRegistry} = ChromeUtils.import("resource://gre/modules/WindowsRegistry.jsm");
+const {Color} = ChromeUtils.import("resource://gre/modules/Color.jsm");
 
 var Windows8WindowFrameColor = {
   _windowFrameColor: null,
 
   get() {
     if (this._windowFrameColor)
       return this._windowFrameColor;
 
@@ -21,30 +22,42 @@ var Windows8WindowFrameColor = {
                                                         "ColorizationColor");
     if (customizationColor == undefined) {
       // Seems to be the default color (hardcoded because of bug 1065998, bug 1107902)
       return [158, 158, 158];
     }
 
     // The color returned from the Registry is in decimal form.
     let customizationColorHex = customizationColor.toString(16);
+    let colorizationColorBalance = WindowsRegistry.readRegKey(HKCU, dwmKey,
+                                                              "ColorizationColorBalance");
 
+    return this._windowFrameColor = this.getColor(customizationColorHex,
+                                                  colorizationColorBalance);
+  },
+
+  /* Checks if black writing on 'aColor' background has enough contrast */
+  isColorContrastEnough(aColor) {
+    let bgColor = this.getColor(aColor);
+    return new Color(...bgColor).isContrastRatioAcceptable(new Color(0, 0, 0));
+  },
+
+  getColor(customizationColorHex, colorizationColorBalance) {
     // Zero-pad the number just to make sure that it is 8 digits.
     customizationColorHex = ("00000000" + customizationColorHex).substr(-8);
     let customizationColorArray = customizationColorHex.match(/../g);
     let [, fgR, fgG, fgB] = customizationColorArray.map(val => parseInt(val, 16));
-    let colorizationColorBalance = WindowsRegistry.readRegKey(HKCU, dwmKey,
-                                                              "ColorizationColorBalance");
+
     if (colorizationColorBalance == undefined) {
       colorizationColorBalance = 78;
     }
 
     // Window frame base color when Color Intensity is at 0, see bug 1004576.
     let frameBaseColor = 217;
     let alpha = colorizationColorBalance / 100;
 
     // Alpha-blend the foreground color with the frame base color.
     let r = Math.round(fgR * alpha + frameBaseColor * (1 - alpha));
     let g = Math.round(fgG * alpha + frameBaseColor * (1 - alpha));
     let b = Math.round(fgB * alpha + frameBaseColor * (1 - alpha));
-    return this._windowFrameColor = [r, g, b];
+    return [r, g, b];
   },
 };

--- a/mail/extensions/mailviews/content/msgViewPickerOverlay.js
+++ b/mail/extensions/mailviews/content/msgViewPickerOverlay.js
@@ -221,17 +221,17 @@ function RefreshTagsPopup(aMenupopup) {
     let menuitem = document.createElement("menuitem");
     menuitem.setAttribute("label", tagInfo.tag);
     menuitem.setAttribute("value", kViewTagMarker + tagInfo.key);
     menuitem.setAttribute("type", "radio");
     if (tagInfo.key == currentTagKey)
       menuitem.setAttribute("checked", true);
     let color = tagInfo.color;
     if (color)
-      menuitem.setAttribute("class", "lc-" + color.substr(1));
+      menuitem.setAttribute("style", "color: " + color + ";");
     aMenupopup.appendChild(menuitem);
   }
 }
 
 function ViewPickerOnLoad() {
   var viewPickerPopup = document.getElementById("viewPickerPopup");
   if (viewPickerPopup)
     RefreshAllViewPopups(viewPickerPopup, true);

--- a/mail/themes/linux/mail/messageWindow.css
+++ b/mail/themes/linux/mail/messageWindow.css
@@ -3,17 +3,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* ===== messageWindow.css ==============================================
   == Styles for the message window.
   ======================================================================= */
 
 @import url("chrome://messenger/skin/");
 @import url("chrome://messenger/skin/primaryToolbar.css");
-@import url("chrome://messenger/skin/tagColors.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 .mail-toolbox {
   margin-top: 0;
   padding-top: 0;
 }
 

--- a/mail/themes/osx/mail/messageWindow.css
+++ b/mail/themes/osx/mail/messageWindow.css
@@ -3,17 +3,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* ===== messageWindow.css ==============================================
   == Styles for the message window.
   ======================================================================= */
 
 @import url("chrome://messenger/skin/");
 @import url("chrome://messenger/skin/primaryToolbar.css");
-@import url("chrome://messenger/skin/tagColors.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: Mail Toolbars and Menubars ::::: */
 
 .mail-toolbox {
   border-bottom: 0;
 }

--- a/mail/themes/windows/mail/messageWindow.css
+++ b/mail/themes/windows/mail/messageWindow.css
@@ -3,17 +3,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* ===== messageWindow.css ==============================================
   == Styles for the message window.
   ======================================================================= */
 
 @import url("chrome://messenger/skin/");
 @import url("chrome://messenger/skin/primaryToolbar.css");
-@import url("chrome://messenger/skin/tagColors.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 #messengerWindow {
   -moz-appearance: window;
   background-color: -moz-Dialog;
 }