diff --git a/ts/routes/graphs/TrueRetentionCombined.svelte b/ts/routes/graphs/TrueRetentionCombined.svelte
index 5a9efc814..cf57e80e1 100644
--- a/ts/routes/graphs/TrueRetentionCombined.svelte
+++ b/ts/routes/graphs/TrueRetentionCombined.svelte
@@ -5,7 +5,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "@generated/ftl";
     import { localizedNumber } from "@tslib/i18n";
-
     import { type RevlogRange } from "./graph-helpers";
     import {
         calculateRetentionPercentageString,
@@ -13,6 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         type PeriodTrueRetentionData,
         type RowData,
     } from "./true-retention";
+    import { onMount } from "svelte";
 
     interface Props {
         revlogRange: RevlogRange;
@@ -22,6 +22,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const { revlogRange, data }: Props = $props();
 
     const rowData: RowData[] = $derived(getRowData(data, revlogRange));
+
+    // Default (non-colorblind) colors
+    let youngColor = "#64c476";
+    let matureColor = "#31a354";
+
+    onMount(() => {
+        const isColorBlindMode = (window as any).colorBlindMode;
+        if (isColorBlindMode) {
+            youngColor = "#44ab9a";
+            matureColor = "#127733";
+        }
+        // Set globally so scoped SCSS can use them
+        document.documentElement.style.setProperty("--young-color", youngColor);
+        document.documentElement.style.setProperty("--mature-color", matureColor);
+    });
 </script>
 
 <table>
@@ -84,11 +99,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .young {
-        color: #64c476;
+        color: var(--young-color);
     }
 
     .mature {
-        color: #31a354;
+        color: var(--mature-color);
     }
 
     .total {
diff --git a/ts/routes/graphs/TrueRetentionSingle.svelte b/ts/routes/graphs/TrueRetentionSingle.svelte
index 9199717f8..b0765b10a 100644
--- a/ts/routes/graphs/TrueRetentionSingle.svelte
+++ b/ts/routes/graphs/TrueRetentionSingle.svelte
@@ -1,7 +1,3 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
 <script lang="ts">
     import * as tr from "@generated/ftl";
     import { type RevlogRange } from "./graph-helpers";
@@ -15,6 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         type Scope,
     } from "./true-retention";
     import { localizedNumber } from "@tslib/i18n";
+    import { onMount } from "svelte";
 
     interface Props {
         revlogRange: RevlogRange;
@@ -25,6 +22,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const { revlogRange, data, scope }: Props = $props();
 
     const rowData: RowData[] = $derived(getRowData(data, revlogRange));
+
+    let passColor = "#3bc464";
+    let failColor = "#c43b3b";
+
+    onMount(() => {
+        const isColorBlindMode = (window as any).colorBlindMode;
+        if (isColorBlindMode) {
+            passColor = "#127733";
+            failColor = "#cb6676";
+        }
+        // Apply them to document root so SCSS can see them
+        document.documentElement.style.setProperty("--pass-color", passColor);
+        document.documentElement.style.setProperty("--fail-color", failColor);
+    });
 </script>
 
 <table>
@@ -71,11 +82,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .pass {
-        color: #3bc464;
+        color: var(--pass-color);
     }
 
     .fail {
-        color: #c43b3b;
+        color: var(--fail-color);
     }
 
     .retention {