From 05ebd7b3f65a80d8ce295066d02f5280e51a7e20 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 4 Jul 2026 14:10:29 +0000
Subject: [PATCH] Improve contrast for .dikw-grid text on light background

---
 .Jules/palette.md | 4 ++++
 styles.css        | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index b6a4027..1c41431 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -9,3 +9,7 @@
 ## 2026-06-25 - Fix Header Overlap
 **Learning:** When using a sticky header, clicking anchor links can cause the target element to scroll under the header, hindering the user experience.
 **Action:** Use `scroll-padding-top` on the `html` element with the height of the sticky header to ensure anchor links scroll to a position just below the header.
+
+## 2024-07-04 - Context-Aware Color Contrast
+**Learning:** While the `--gold` color variable has excellent contrast on dark backgrounds (`--ink`), using it for text on light backgrounds (`--paper`) fails WCAG AA contrast standards and reduces readability.
+**Action:** Always verify contrast against the specific background color. Use higher-contrast alternatives like `--teal` for text on light backgrounds, reserving `--gold` for dark mode or dark sections.
diff --git a/styles.css b/styles.css
index 3cca9f9..620abf6 100644
--- a/styles.css
+++ b/styles.css
@@ -442,7 +442,7 @@ h1 {
 .dikw-grid span {
   display: block;
   margin-bottom: 38px;
-  color: var(--gold);
+  color: var(--teal);
   font-size: 14px;
   font-weight: 900;
 }