diff --git a/app/client/packages/design-system/theming/src/utils/TokensAccessor/DarkModeTheme.ts b/app/client/packages/design-system/theming/src/utils/TokensAccessor/DarkModeTheme.ts
index 2cccebcdf6..5139826d34 100644
--- a/app/client/packages/design-system/theming/src/utils/TokensAccessor/DarkModeTheme.ts
+++ b/app/client/packages/design-system/theming/src/utils/TokensAccessor/DarkModeTheme.ts
@@ -140,7 +140,7 @@ export class DarkModeTheme implements ColorModeTheme {
   private get fgAccent() {
     const color = this.seedColor.clone();
 
-    if (this.seedColor.contrastAPCA(this.bg) <= 60) {
+    if (this.bg.contrastAPCA(this.seedColor) >= -60) {
       if (this.seedIsAchromatic) {
         color.oklch.l = 0.79;
         color.oklch.c = 0;
@@ -151,34 +151,26 @@ export class DarkModeTheme implements ColorModeTheme {
       color.oklch.c = 0.136;
       return color;
     }
-
     return color;
   }
 
   private get fgOnAccent() {
-    const color = this.seedColor.clone();
-
-    if (this.seedColor.contrastAPCA(this.bg) <= 40) {
-      if (this.seedIsAchromatic) {
-        color.oklch.l = 0.985;
-        color.oklch.c = 0;
-        return color;
-      }
-
-      color.oklch.l = 0.985;
-      color.oklch.c = 0.016;
-      return color;
-    }
+    const tint = this.seedColor.clone();
+    const shade = this.seedColor.clone();
 
     if (this.seedIsAchromatic) {
-      color.oklch.l = 0.15;
-      color.oklch.c = 0;
-      return color;
+      tint.oklch.c = 0;
+      shade.oklch.c = 0;
     }
 
-    color.oklch.l = 0.15;
-    color.oklch.c = 0.064;
-    return color;
+    tint.oklch.l = 0.94;
+    shade.oklch.l = 0.27;
+
+    if (-this.bgAccent.contrastAPCA(tint) < this.bgAccent.contrastAPCA(shade)) {
+      return shade;
+    }
+
+    return tint;
   }
 
   private get fgNegative() {
@@ -192,7 +184,7 @@ export class DarkModeTheme implements ColorModeTheme {
   private get bdAccent() {
     const color = this.seedColor.clone();
 
-    if (this.bg.contrastAPCA(this.seedColor) > -15) {
+    if (this.bg.contrastAPCA(this.seedColor) >= -25) {
       if (this.seedIsAchromatic) {
         color.oklch.l = 0.985;
         color.oklch.c = 0;
diff --git a/app/client/packages/design-system/theming/src/utils/TokensAccessor/LightModeTheme.ts b/app/client/packages/design-system/theming/src/utils/TokensAccessor/LightModeTheme.ts
index faafb8cc64..1bdaaa0a09 100644
--- a/app/client/packages/design-system/theming/src/utils/TokensAccessor/LightModeTheme.ts
+++ b/app/client/packages/design-system/theming/src/utils/TokensAccessor/LightModeTheme.ts
@@ -235,7 +235,7 @@ export class LightModeTheme implements ColorModeTheme {
   private get fgAccent() {
     const color = this.seedColor.clone();
 
-    if (this.seedColor.contrastAPCA(this.bg) >= -60) {
+    if (this.bg.contrastAPCA(this.seedColor) <= 60) {
       if (this.seedIsAchromatic) {
         color.oklch.l = 0.25;
         color.oklch.c = 0;
@@ -251,29 +251,24 @@ export class LightModeTheme implements ColorModeTheme {
   }
 
   private get fgOnAccent() {
-    const color = this.seedColor.clone();
-
-    if (this.seedColor.contrastAPCA(this.bg) <= -60) {
-      if (this.seedIsAchromatic) {
-        color.oklch.l = 0.985;
-        color.oklch.c = 0;
-        return color;
-      }
-
-      color.oklch.l = 0.985;
-      color.oklch.c = 0.016;
-      return color;
-    }
+    const tint = this.seedColor.clone();
+    const shade = this.seedColor.clone();
 
     if (this.seedIsAchromatic) {
-      color.oklch.l = 0.15;
-      color.oklch.c = 0;
-      return color;
+      tint.oklch.c = 0;
+      shade.oklch.c = 0;
     }
 
-    color.oklch.l = 0.15;
-    color.oklch.c = 0.064;
-    return color;
+    tint.oklch.l = 0.96;
+    shade.oklch.l = 0.23;
+
+    if (
+      -this.bgAccent.contrastAPCA(tint) >= this.bgAccent.contrastAPCA(shade)
+    ) {
+      return tint;
+    }
+
+    return shade;
   }
 
   private get fgNegative() {
@@ -290,7 +285,7 @@ export class LightModeTheme implements ColorModeTheme {
   private get bdAccent() {
     const color = this.seedColor.clone();
 
-    if (this.seedColor.contrastAPCA(this.bg) >= -25) {
+    if (this.bg.contrastAPCA(this.seedColor) <= 25) {
       if (this.seedIsAchromatic) {
         color.oklch.l = 0.15;
         color.oklch.c = 0;