Predictify-org · Glittersup · Jun 27, 2026
diff --git a/app/(dashboard)/settings/page.tsx b/app/(dashboard)/settings/page.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { type SyntheticEvent, useMemo, useState } from "react"
+import { type SyntheticEvent, useMemo, useState, useEffect } from "react"
 import {
   Bell,
   Eye,
@@ -120,6 +120,22 @@ export default function SettingsPage() {
   const [walletAlias, setWalletAlias] = useState(true)
   const [copyWarning, setCopyWarning] = useState(true)
   const { soundEnabled, setSoundEnabled } = useSoundEnabled()
+  const [forceHighContrast, setHighContrast] = useState(() => {
+    if (typeof window !== "undefined") {
+      return localStorage.getItem("force-high-contrast") === "true"
+    }
+    return false
+  })
+
+  useEffect(() => {
+    const root = window.document.documentElement
+    if (forceHighContrast) {
+      root.classList.add("high-contrast")
+    } else {
+      root.classList.remove("high-contrast")
+    }
+    localStorage.setItem("force-high-contrast", forceHighContrast.toString())
+  }, [forceHighContrast])
 
   const selectedDensity = useMemo(
     () => densityOptions.find((option) => option.value === density),
@@ -306,6 +322,13 @@ export default function SettingsPage() {
                       checked={showWalletBadge}
                       onCheckedChange={setShowWalletBadge}
                     />
+                    <PreferenceSwitch
+                      id="force-high-contrast"
+                      label="Force high contrast"
+                      description="Overrides the current theme with a high-contrast palette for maximum readability. Recommended for visual impairments."
+                      checked={forceHighContrast}
+                      onCheckedChange={setHighContrast}
+                    />
                   </div>
                 </CardContent>
               </Card>

diff --git a/app/globals.css b/app/globals.css
@@ -270,6 +270,73 @@ body {
   }
 }
 
+/* ===== HIGH CONTRAST MODE (Accessibility) ===== */
+
+/**
+ * Native Windows High Contrast Support (forced-colors: active)
+ * and manual override (html.high-contrast)
+ */
+@media (forced-colors: active) {
+  :root {
+    /* Respect system colors while ensuring borders are visible */
+    --border: CanvasText;
+    --input: CanvasText;
+    --ring: CanvasText;
+  }
+
+  * {
+    /* Ensure all elements have visible borders in forced-colors mode */
+    forced-color-adjust: none;
+    border-color: CanvasText !important;
+  }
+
+  button, a.btn, .badge {
+    border: 2px solid CanvasText !important;
+  }
+
+  /* Status badges meaning without color */
+  .badge-success::before { content: "✓ "; }
+  .badge-warning::before { content: "⚠ "; }
+  .badge-error::before { content: "✕ "; }
+}
+
+/* Manual "Force high contrast" override */
+.high-contrast {
+  --background: 0 0% 0%;
+  --foreground: 0 0% 100%;
+  --card: 0 0% 0%;
+  --card-foreground: 0 0% 100%;
+  --primary: 0 0% 100%;
+  --primary-foreground: 0 0% 0%;
+  --secondary: 0 0% 15%;
+  --secondary-foreground: 0 0% 100%;
+  --muted: 0 0% 20%;
+  --muted-foreground: 0 0% 100%;
+  --accent: 0 0% 30%;
+  --accent-foreground: 0 0% 100%;
+  --border: 0 0% 100%;
+  --input: 0 0% 100%;
+  --ring: 0 0% 100%;
+}
+
+.high-contrast * {
+  border-color: white !important;
+  text-shadow: none !important;
+  box-shadow: none !important;
+}
+
+.high-contrast button, 
+.high-contrast a.btn, 
+.high-contrast .badge {
+  border: 2px solid white !important;
+}
+
+/* Ensure icons are visible */
+.high-contrast svg {
+  fill: currentColor !important;
+  stroke: currentColor !important;
+}
+
 /* ===== PRINT STYLES ===== */
 
 @media print {

diff --git a/components/icons/Chat.tsx b/components/icons/Chat.tsx
@@ -5,7 +5,7 @@ type Props = {
   const Chat = (props: Props) => {
     return (
       <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden className={props.className}>
-        <path d="M10.375 0.875C7.78998 0.87773 5.31161 1.90584 3.48372 3.73372C1.65584 5.56161 0.62773 8.03998 0.625 10.625V18.5C0.625 18.9973 0.822544 19.4742 1.17417 19.8258C1.52581 20.1775 2.00272 20.375 2.5 20.375H10.375C12.9609 20.375 15.4408 19.3478 17.2693 17.5193C19.0978 15.6908 20.125 13.2109 20.125 10.625C20.125 8.03914 19.0978 5.55919 17.2693 3.73071C15.4408 1.90223 12.9609 0.875 10.375 0.875ZM10.375 18.125H2.875V10.625C2.875 9.14164 3.31487 7.69159 4.13898 6.45822C4.96309 5.22485 6.13443 4.26356 7.50487 3.6959C8.87532 3.12825 10.3833 2.97972 11.8382 3.26911C13.293 3.5585 14.6294 4.27281 15.6783 5.3217C16.7272 6.37059 17.4415 7.70697 17.7309 9.16182C18.0203 10.6167 17.8718 12.1247 17.3041 13.4951C16.7364 14.8656 15.7751 16.0369 14.5418 16.861C13.3084 17.6851 11.8584 18.125 10.375 18.125ZM9.625 11C9.625 11.2967 9.53703 11.5867 9.3722 11.8334C9.20738 12.08 8.97311 12.2723 8.69903 12.3858C8.42494 12.4994 8.12334 12.5291 7.83236 12.4712C7.54139 12.4133 7.27412 12.2704 7.06434 12.0607C6.85456 11.8509 6.7117 11.5836 6.65382 11.2926C6.59594 11.0017 6.62565 10.7001 6.73918 10.426C6.85271 10.1519 7.04497 9.91762 7.29165 9.7528C7.53832 9.58797 7.82833 9.5 8.125 9.5C8.52282 9.5 8.90436 9.65804 9.18566 9.93934C9.46696 10.2206 9.625 10.6022 9.625 11ZM14.125 11C14.125 11.2967 14.037 11.5867 13.8722 11.8334C13.7074 12.08 13.4731 12.2723 13.199 12.3858C12.9249 12.4994 12.6233 12.5291 12.3324 12.4712C12.0414 12.4133 11.7741 12.2704 11.5643 12.0607C11.3546 11.8509 11.2117 11.5836 11.1538 11.2926C11.0959 11.0017 11.1256 10.7001 11.2392 10.426C11.3527 10.1519 11.545 9.91762 11.7916 9.7528C12.0383 9.58797 12.3283 9.5 12.625 9.5C13.0228 9.5 13.4044 9.65804 13.6857 9.93934C13.967 10.2206 14.125 10.6022 14.125 11Z" fill="#A5B4FC"/>
+        <path d="M10.375 0.875C7.78998 0.87773 5.31161 1.90584 3.48372 3.73372C1.65584 5.56161 0.62773 8.03998 0.625 10.625V18.5C0.625 18.9973 0.822544 19.4742 1.17417 19.8258C1.52581 20.1775 2.00272 20.375 2.5 20.375H10.375C12.9609 20.375 15.4408 19.3478 17.2693 17.5193C19.0978 15.6908 20.125 13.2109 20.125 10.625C20.125 8.03914 19.0978 5.55919 17.2693 3.73071C15.4408 1.90223 12.9609 0.875 10.375 0.875ZM10.375 18.125H2.875V10.625C2.875 9.14164 3.31487 7.69159 4.13898 6.45822C4.96309 5.22485 6.13443 4.26356 7.50487 3.6959C8.87532 3.12825 10.3833 2.97972 11.8382 3.26911C13.293 3.5585 14.6294 4.27281 15.6783 5.3217C16.7272 6.37059 17.4415 7.70697 17.7309 9.16182C18.0203 10.6167 17.8718 12.1247 17.3041 13.4951C16.7364 14.8656 15.7751 16.0369 14.5418 16.861C13.3084 17.6851 11.8584 18.125 10.375 18.125ZM9.625 11C9.625 11.2967 9.53703 11.5867 9.3722 11.8334C9.20738 12.08 8.97311 12.2723 8.69903 12.3858C8.42494 12.4994 8.12334 12.5291 7.83236 12.4712C7.54139 12.4133 7.27412 12.2704 7.06434 12.0607C6.85456 11.8509 6.7117 11.5836 6.65382 11.2926C6.59594 11.0017 6.62565 10.7001 6.73918 10.426C6.85271 10.1519 7.04497 9.91762 7.29165 9.7528C7.53832 9.58797 7.82833 9.5 8.125 9.5C8.52282 9.5 8.90436 9.65804 9.18566 9.93934C9.46696 10.2206 9.625 10.6022 9.625 11ZM14.125 11C14.125 11.2967 14.037 11.5867 13.8722 11.8334C13.7074 12.08 13.4731 12.2723 13.199 12.3858C12.9249 12.4994 12.6233 12.5291 12.3324 12.4712C12.0414 12.4133 11.7741 12.2704 11.5643 12.0607C11.3546 11.8509 11.2117 11.5836 11.1538 11.2926C11.0959 11.0017 11.1256 10.7001 11.2392 10.426C11.3527 10.1519 11.545 9.91762 11.7916 9.7528C12.0383 9.58797 12.3283 9.5 12.625 9.5C13.0228 9.5 13.4044 9.65804 13.6857 9.93934C13.967 10.2206 14.125 10.6022 14.125 11Z" fill="currentColor"/>
       </svg>      
     )
   }

diff --git a/components/icons/StellarIcon.tsx b/components/icons/StellarIcon.tsx
@@ -4,8 +4,8 @@ type Props = {
 
 const StellarIcon = (props: Props) => {
   return (
-    <div className={`h-[20px] flex items-center justify-center bg-black rounded-full p-1 w-[20px] ${props.className}`}>
-        <svg xmlns="http://www.w3.org/2000/svg"  width="1em" height="1em" fill="#ffffff" viewBox="0 0 24 24">
+    <div className={`h-[20px] flex items-center justify-center rounded-full border border-current p-1 w-[20px] ${props.className}`}>
+        <svg xmlns="http://www.w3.org/2000/svg"  width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path d="M12.283 1.851A10.154 10.154 0 0 0 1.876 12.775 1.85 1.85 0 0 1 .872 14.56L0 15.005v2.074l2.568-1.309.832-.424.82-.417 14.71-7.496 1.653-.842L24 4.85V2.776l-3.387 1.728-2.89 1.473-13.955 7.108a8.313 8.313 0 0 1 12.296-8.333l1.654-.843.247-.126a10.15 10.15 0 0 0-5.682-1.932M24 6.925 5.055 16.571l-1.653.844L0 19.15v2.072L3.378 19.5l2.89-1.473 13.97-7.117q.07.544.07 1.092A8.312 8.312 0 0 1 7.93 19.248l-.101.054-1.793.914a10.155 10.155 0 0 0 16.089-8.994 1.85 1.85 0 0 1 1.003-1.785L24 8.992z"></path>
         </svg>
     </div>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -122,6 +122,11 @@ const config: Config = {
   		}
   	}
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [
+    require("tailwindcss-animate"),
+    function({ addVariant }: { addVariant: Function }) {
+      addVariant('high-contrast', '.high-contrast &')
+    }
+  ],
 };
 export default config;