diff --git a/components/style/gecko/media_features.rs b/components/style/gecko/media_features.rs
index ef08cafabe0..321669ce1af 100644
--- a/components/style/gecko/media_features.rs
+++ b/components/style/gecko/media_features.rs
@@ -353,6 +353,26 @@ fn eval_prefers_contrast(device: &Device, query_value: Option<PrefersContrast>)
     }
 }
 
+/// Possible values for the forced-colors media query.
+/// https://drafts.csswg.org/mediaqueries-5/#forced-colors
+#[derive(Clone, Copy, Debug, FromPrimitive, PartialEq, Parse, ToCss)]
+#[repr(u8)]
+pub enum ForcedColors {
+    /// Page colors are not being forced.
+    None,
+    /// Page colors are being forced.
+    Active,
+}
+
+/// https://drafts.csswg.org/mediaqueries-5/#forced-colors
+fn eval_forced_colors(device: &Device, query_value: Option<ForcedColors>) -> bool {
+    let forced = !device.use_document_colors();
+    match query_value {
+        Some(query_value) => forced == (query_value == ForcedColors::Active),
+        None => forced,
+    }
+}
+
 #[derive(Clone, Copy, Debug, FromPrimitive, Parse, ToCss)]
 #[repr(u8)]
 enum OverflowBlock {
@@ -593,7 +613,7 @@ macro_rules! system_metric_feature {
 /// to support new types in these entries and (2) ensuring that either
 /// nsPresContext::MediaFeatureValuesChanged is called when the value that
 /// would be returned by the evaluator function could change.
-pub static MEDIA_FEATURES: [MediaFeatureDescription; 54] = [
+pub static MEDIA_FEATURES: [MediaFeatureDescription; 55] = [
     feature!(
         atom!("width"),
         AllowsRanges::Yes,
@@ -722,6 +742,12 @@ pub static MEDIA_FEATURES: [MediaFeatureDescription; 54] = [
         // is done.
         ParsingRequirements::empty(),
     ),
+    feature!(
+        atom!("forced-colors"),
+        AllowsRanges::No,
+        keyword_evaluator!(eval_forced_colors, ForcedColors),
+        ParsingRequirements::empty(),
+    ),
     feature!(
         atom!("overflow-block"),
         AllowsRanges::No,
diff --git a/components/style/media_queries/media_feature_expression.rs b/components/style/media_queries/media_feature_expression.rs
index 0d2262f1def..f4eb40d1afa 100644
--- a/components/style/media_queries/media_feature_expression.rs
+++ b/components/style/media_queries/media_feature_expression.rs
@@ -224,6 +224,9 @@ fn disabled_by_pref(feature: &Atom, context: &ParserContext) -> bool {
         if *feature == atom!("-moz-touch-enabled") {
             return !static_prefs::pref!("layout.css.moz-touch-enabled.enabled");
         }
+        if *feature == atom!("forced-colors") {
+            return !static_prefs::pref!("layout.css.forced-colors.enabled");
+        }
         // prefers-contrast is always enabled in the ua and chrome. On
         // the web it is hidden behind a preference.
         if *feature == atom!("prefers-contrast") {