diff --git a/src/corePlugins.js b/src/corePlugins.js
index beeb7d956e1a..01743babe176 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -170,6 +170,11 @@ export let variantPlugins = {
     addVariant('portrait', '@media (orientation: portrait)')
     addVariant('landscape', '@media (orientation: landscape)')
   },
+
+  prefersContrastVariants: ({ addVariant }) => {
+    addVariant('contrast-more', '@media (prefers-contrast: more)')
+    addVariant('contrast-less', '@media (prefers-contrast: less)')
+  },
 }
 
 export let corePlugins = {
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index b242e8028808..410a7a6e5bc5 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -519,6 +519,7 @@ function resolvePlugins(context, root) {
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
     variantPlugins['orientationVariants'],
+    variantPlugins['prefersContrastVariants'],
   ]
 
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]
diff --git a/tests/variants.test.css b/tests/variants.test.css
index 657d136e43d9..b7720dc2bf9c 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -918,3 +918,15 @@
     background-color: rgb(253 224 71 / var(--tw-bg-opacity));
   }
 }
+@media (prefers-contrast: more) {
+  .contrast-more\:bg-yellow-300 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+  }
+}
+@media (prefers-contrast: less) {
+  .contrast-less\:bg-yellow-300 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+  }
+}
diff --git a/tests/variants.test.html b/tests/variants.test.html
index af01da26fb3b..ae70d6156b50 100644
--- a/tests/variants.test.html
+++ b/tests/variants.test.html
@@ -139,6 +139,10 @@
     <div class="portrait:bg-yellow-300"></div>
     <div class="landscape:bg-yellow-300"></div>
 
+    <!-- Prefers contrast variants -->
+    <div class="contrast-more:bg-yellow-300"></div>
+    <div class="contrast-less:bg-yellow-300"></div>
+
     <!-- Stacked variants -->
     <div class="open:hover:bg-red-200"></div>
     <div class="file:hover:bg-blue-600"></div>