diff --git a/index.php b/index.php
index 968d28b..f427938 100755
--- a/index.php
+++ b/index.php
@@ -18,6 +18,30 @@ if (!$result) {
 
 $row = mysqli_fetch_assoc($result);
 
+// Funktion, die basierend auf der Hintergrundfarbe die optimale Textfarbe zurückgibt
+function get_readable_text_color($hex_code)
+{
+    // Entferne das # falls vorhanden
+    $hex_code = ltrim($hex_code, '#');
+
+    // Erweitere 3-stellige Hex-Codes auf 6 Stellen
+    if (strlen($hex_code) == 3) {
+        $hex_code = $hex_code[0] . $hex_code[0] . $hex_code[1] . $hex_code[1] . $hex_code[2] . $hex_code[2];
+    }
+
+    // Konvertiere Hex zu RGB
+    $r = hexdec(substr($hex_code, 0, 2));
+    $g = hexdec(substr($hex_code, 2, 2));
+    $b = hexdec(substr($hex_code, 4, 2));
+
+    // Berechne die Luminanz (Helligkeit)
+    // Die menschliche Wahrnehmung von Helligkeit ist nicht linear
+    $luminance = (0.299 * $r + 0.587 * $g + 0.114 * $b) / 255;
+
+    // Gib Weiß (#FFFFFF) für dunkle Farben und Schwarz (#000000) für helle Farben zurück
+    return $luminance > 0.5 ? '#000000' : '#FFFFFF';
+}
+
 include('inc/header.php');
 
 ?>
@@ -25,16 +49,19 @@ include('inc/header.php');
 <div class="container py-5">
     <div class="text-center mb-5">
         <h1 class="display-4 fw-bold">DoMiLi</h1>
-        <p class="lead">Farbe der Kalenderwoche <strong><?= $current_week ?></strong></p>
+        <p class="lead">Farbe für Kalenderwoche <strong><?= $current_week ?></strong></p>
     </div>
 
     <?php if ($row): ?>
         <div class="card mx-auto bg-light shadow" style="max-width: 300px;">
             <div class="card-body text-center">
                 <h5 class="card-title mb-3">Farbe der Woche</h5>
-                <div class="rounded mb-3 mx-auto" style="width: min(100px, 25vw); height: min(100px, 25vw); background-color: <?= htmlspecialchars($row['hex_code']) ?>;"></div>
-                <p class="fs-5 fw-semibold"><?= htmlspecialchars($row['name']) ?></p>
-                <p class="text-muted">Datum: <?= date('d.m.Y', strtotime($row['meeting_date'])) ?></p>
+                <div class="rounded mb-3 mx-auto d-flex justify-content-center align-items-center" style="height: min(100px, 25vw); background-color: <?= htmlspecialchars($row['hex_code']) ?>; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);">
+                    <p class="fs-5 fw-semibold m-0" style="color: <?= get_readable_text_color($row['hex_code']) ?>;"><?= htmlspecialchars($row['name']) ?></p>
+                </div>
+
+                <p class="text-muted">nächster Termin:</p>
+                <p class="text-muted"><?= date('d.m.Y', strtotime($row['meeting_date'])) ?></p>
             </div>
         </div>
     <?php else: ?>