diff --git a/.changeset/theme-settings-contrast.md b/.changeset/theme-settings-contrast.md
new file mode 100644
index 000000000..051c2028f
--- /dev/null
+++ b/.changeset/theme-settings-contrast.md
@@ -0,0 +1,5 @@
+---
+"@tabler/preview": minor
+---
+
+Added a Contrast setting (`auto`/`normal`/`high`) to the Theme Settings panel.
diff --git a/core/js/tabler-theme.ts b/core/js/tabler-theme.ts
index 23b2b73c0..837410ce2 100644
--- a/core/js/tabler-theme.ts
+++ b/core/js/tabler-theme.ts
@@ -6,6 +6,7 @@
 interface ThemeConfig {
   'theme': string
   'theme-base': string
+  'theme-contrast': string
   'theme-font': string
   'theme-primary': string
   'theme-radius': string
@@ -14,6 +15,8 @@ interface ThemeConfig {
 const themeConfig: ThemeConfig = {
   'theme': 'light',
   'theme-base': 'gray',
+  // 'auto' = no attribute: the css then follows `prefers-contrast: more`
+  'theme-contrast': 'auto',
   'theme-font': 'sans-serif',
   'theme-primary': 'blue',
   'theme-radius': '1',
diff --git a/shared/components/demo/ThemeSettings.astro b/shared/components/demo/ThemeSettings.astro
index 09825b0e3..d916692ab 100644
--- a/shared/components/demo/ThemeSettings.astro
+++ b/shared/components/demo/ThemeSettings.astro
@@ -7,6 +7,7 @@ import { site } from '@shared/lib/site'
 const defaults = {
   'theme': 'light',
   'theme-base': 'gray',
+  'theme-contrast': 'auto',
   'theme-font': 'sans-serif',
   'theme-primary': 'blue',
   'theme-radius': '1',
@@ -41,6 +42,21 @@ const defaults = {
           }
         </fieldset>
 
+        <fieldset class="border-0 p-0 mb-4">
+          <legend class="form-label float-none mb-0" style="font-size: inherit;">Contrast</legend>
+          <FormHint as="p">Increase contrast for better readability. Auto follows your system setting.</FormHint>
+          {
+            ['auto', 'normal', 'high'].map((contrast) => (
+              <label class="form-check">
+                <div class="form-selectgroup-item">
+                  <input type="radio" name="theme-contrast" value={contrast} class="form-check-input" checked={contrast === defaults['theme-contrast']} />
+                  <div class="form-check-label">{contrast.charAt(0).toUpperCase() + contrast.slice(1)}</div>
+                </div>
+              </label>
+            ))
+          }
+        </fieldset>
+
         <fieldset class="border-0 p-0 mb-4">
           <legend class="form-label float-none mb-0" style="font-size: inherit;">Color scheme</legend>
           <FormHint as="p">The perfect color mode for your app.</FormHint>
diff --git a/shared/layouts/BaseLayout.astro b/shared/layouts/BaseLayout.astro
index a98652ca3..0ede1d7ab 100644
--- a/shared/layouts/BaseLayout.astro
+++ b/shared/layouts/BaseLayout.astro
@@ -145,6 +145,7 @@ const libJsFiles = (head: boolean) => pageLibEntries.filter(([, lib]) => Boolean
         var themeConfig = {
           'theme': 'light',
           'theme-base': 'gray',
+          'theme-contrast': 'auto',
           'theme-font': 'sans-serif',
           'theme-primary': 'blue',
           'theme-radius': '1',