diff --git a/frontend/css/style.css b/frontend/css/style.css
index f4a24dff3..0dfeee7ab 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -36,6 +36,7 @@
   --text-color: light-dark(hsl(0deg 0% 25%), hsl(0deg 0% 80%));
   --text-color-lighter: light-dark(hsl(0deg 0% 30%), hsl(0deg 0% 75%));
   --text-color-lightest: light-dark(hsl(0deg 0% 40%), hsl(0deg 0% 65%));
+  --text-color-chart: light-dark(hsl(0deg 0% 30%), hsl(0deg 0% 15%));
   --link-color: light-dark(hsl(203deg 100% 32%), hsl(203deg 100% 68%));
   --link-hover-color: var(--text-color-lighter);
 
diff --git a/frontend/src/charts/Icicle.svelte b/frontend/src/charts/Icicle.svelte
index e57b070dd..e742ff0c5 100644
--- a/frontend/src/charts/Icicle.svelte
+++ b/frontend/src/charts/Icicle.svelte
@@ -96,4 +96,8 @@
   g:hover > g.current {
     opacity: 1;
   }
+
+  text {
+    fill: var(--text-color-chart);
+  }
 </style>
diff --git a/frontend/src/charts/Treemap.svelte b/frontend/src/charts/Treemap.svelte
index ccba0486f..83e7bfdc1 100644
--- a/frontend/src/charts/Treemap.svelte
+++ b/frontend/src/charts/Treemap.svelte
@@ -82,4 +82,8 @@
   svg {
     shape-rendering: crispedges;
   }
+
+  text {
+    fill: var(--text-color-chart);
+  }
 </style>