diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index d47620218d4c..d3cde4488fa0 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -768,8 +768,8 @@ function resolvePlugins(context, root) {
     variantPlugins['directionVariants'],
     variantPlugins['reducedMotionVariants'],
     variantPlugins['prefersContrastVariants'],
-    variantPlugins['forcedColorsVariants'],
     variantPlugins['darkVariants'],
+    variantPlugins['forcedColorsVariants'],
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
     variantPlugins['orientationVariants'],
diff --git a/tests/variants.test.css b/tests/variants.test.css
index 8a9d481ee7bc..cd2ec1dd7977 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -347,6 +347,11 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+@media (forced-colors: active) {
+  .forced-colors\:flex {
+    display: flex;
+  }
+}
 @media print {
   .print\:bg-yellow-300 {
     --tw-bg-opacity: 1;
diff --git a/tests/variants.test.html b/tests/variants.test.html
index bd40b625fbdb..f3ba2ba3b6ad 100644
--- a/tests/variants.test.html
+++ b/tests/variants.test.html
@@ -121,6 +121,9 @@
 <!-- Dark mode variants -->
 <div class="dark:shadow-md"></div>
 
+<!-- Forced colors variant -->
+<div class="forced-colors:flex"></div>
+
 <!-- Print variant -->
 <div class="print:bg-yellow-300"></div>