diff --git a/modules/libpref/init/all.js b/modules/libpref/init/all.js
index 8251bde64311..62c4e8f3622c 100644
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -509,19 +509,6 @@ pref("ui.textHighlightBackground", "#ef0fff");
 // The foreground color for the matched text in findbar highlighting
 // Used with nsISelectionController::SELECTION_FIND
 pref("ui.textHighlightForeground", "#ffffff");
-// The background color for :autofill-ed inputs.
-//
-// In the past, we used the following `filter` to paint autofill backgrounds:
-//
-//   grayscale(21%) brightness(88%) contrast(161%) invert(10%) sepia(40%) saturate(206%);
-//
-// but there are some pages where using `filter` caused issues because it
-// changes the z-order (see bug 1687682, bug 1727950).
-//
-// The color is chosen so that you get the same final color on a white
-// background as the filter above (#fffcc8), but with some alpha so as to
-// prevent fully illegible text.
-pref("ui.-moz-autofill-background", "rgba(255, 249, 145, .5)");
 
 // We want the ability to forcibly disable platform a11y, because
 // some non-a11y-related components attempt to bring it up.  See bug
diff --git a/widget/Theme.cpp b/widget/Theme.cpp
index fa8a17eaadde..b31920fa115e 100644
--- a/widget/Theme.cpp
+++ b/widget/Theme.cpp
@@ -296,6 +296,9 @@ std::pair<sRGBColor, sRGBColor> Theme::ComputeButtonColors(
   bool isHovered = aState.HasState(ElementState::HOVER);
 
   nscolor backgroundColor = [&] {
+    if (aState.HasState(ElementState::AUTOFILL)) {
+      return aColors.SystemNs(StyleSystemColor::MozAutofillBackground);
+    }
     if (isDisabled) {
       return aColors.SystemNs(StyleSystemColor::MozButtondisabledface);
     }
@@ -308,12 +311,6 @@ std::pair<sRGBColor, sRGBColor> Theme::ComputeButtonColors(
     return aColors.SystemNs(StyleSystemColor::Buttonface);
   }();
 
-  if (aState.HasState(ElementState::AUTOFILL)) {
-    backgroundColor = NS_ComposeColors(
-        backgroundColor,
-        aColors.SystemNs(StyleSystemColor::MozAutofillBackground));
-  }
-
   const sRGBColor borderColor =
       ComputeBorderColor(aState, aColors, OutlineCoversBorder::Yes);
   return std::make_pair(sRGBColor::FromABGR(backgroundColor), borderColor);
@@ -323,18 +320,15 @@ std::pair<sRGBColor, sRGBColor> Theme::ComputeTextfieldColors(
     const ElementState& aState, const Colors& aColors,
     OutlineCoversBorder aOutlineCoversBorder) {
   nscolor backgroundColor = [&] {
+    if (aState.HasState(ElementState::AUTOFILL)) {
+      return aColors.SystemNs(StyleSystemColor::MozAutofillBackground);
+    }
     if (aState.HasState(ElementState::DISABLED)) {
       return aColors.SystemNs(StyleSystemColor::MozDisabledfield);
     }
     return aColors.SystemNs(StyleSystemColor::Field);
   }();
 
-  if (aState.HasState(ElementState::AUTOFILL)) {
-    backgroundColor = NS_ComposeColors(
-        backgroundColor,
-        aColors.SystemNs(StyleSystemColor::MozAutofillBackground));
-  }
-
   const sRGBColor borderColor =
       ComputeBorderColor(aState, aColors, aOutlineCoversBorder);
   return std::make_pair(sRGBColor::FromABGR(backgroundColor), borderColor);
diff --git a/widget/cocoa/nsLookAndFeel.mm b/widget/cocoa/nsLookAndFeel.mm
index d7650a6eb527..779984be0c28 100644
--- a/widget/cocoa/nsLookAndFeel.mm
+++ b/widget/cocoa/nsLookAndFeel.mm
@@ -353,6 +353,7 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID aID, ColorScheme aScheme,
     case ColorID::SpellCheckerUnderline:
     case ColorID::Activeborder:
     case ColorID::Inactiveborder:
+    case ColorID::MozAutofillBackground:
       aColor = GetStandinForNativeColor(aID, aScheme);
       return NS_OK;
     default:
diff --git a/widget/gtk/nsLookAndFeel.cpp b/widget/gtk/nsLookAndFeel.cpp
index 72f281fedc62..8702c154d628 100644
--- a/widget/gtk/nsLookAndFeel.cpp
+++ b/widget/gtk/nsLookAndFeel.cpp
@@ -800,6 +800,7 @@ nsresult nsLookAndFeel::PerThemeData::GetColor(ColorID aID,
     case ColorID::SpellCheckerUnderline:
     case ColorID::Mark:
     case ColorID::Marktext:
+    case ColorID::MozAutofillBackground:
       aColor = GetStandinForNativeColor(
           aID, mIsDark ? ColorScheme::Dark : ColorScheme::Light);
       break;
diff --git a/widget/nsXPLookAndFeel.cpp b/widget/nsXPLookAndFeel.cpp
index b00f82fe9391..0c5b5207f27e 100644
--- a/widget/nsXPLookAndFeel.cpp
+++ b/widget/nsXPLookAndFeel.cpp
@@ -711,6 +711,7 @@ nscolor nsXPLookAndFeel::GetStandinForNativeColor(ColorID aID,
       // Seems to be the default color (hardcoded because of bug 1065998)
       COLOR(MozNativehyperlinktext, 0x00, 0x66, 0xCC)
       COLOR(MozNativevisitedhyperlinktext, 0x55, 0x1A, 0x8B)
+      COLOR(MozAutofillBackground, 0xff, 0xfc, 0xc8)
     default:
       break;
   }
@@ -855,6 +856,11 @@ Maybe<nscolor> nsXPLookAndFeel::GenericDarkColor(ColorID aID) {
     case ColorID::Inactivecaption:
       color = NS_RGB(28, 27, 34);
       break;
+    case ColorID::MozAutofillBackground:
+      // This is the light version of this color, but darkened to have good
+      // contrast with our white-ish FieldText.
+      color = NS_RGB(0x72, 0x6c, 0x00);
+      break;
     default:
       return Nothing();
   }
diff --git a/widget/windows/nsLookAndFeel.cpp b/widget/windows/nsLookAndFeel.cpp
index 44d0e779fd5e..b6b6877857d8 100644
--- a/widget/windows/nsLookAndFeel.cpp
+++ b/widget/windows/nsLookAndFeel.cpp
@@ -364,6 +364,7 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID aID, ColorScheme aScheme,
     case ColorID::Marktext:
     case ColorID::Mark:
     case ColorID::SpellCheckerUnderline:
+    case ColorID::MozAutofillBackground:
       aColor = GetStandinForNativeColor(aID, aScheme);
       return NS_OK;
     default: