From 6a9c2ea5393a4370fb269ee965d4da4b2f675546 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 3 Jul 2026 14:16:38 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B0=9D=EC=9D=80=20?=
 =?UTF-8?q?=EB=B0=B0=EA=B2=BD=EC=9D=98=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=83=89=EC=83=81=20=EB=8C=80=EB=B9=84=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
`.dikw-grid span` 요소의 텍스트 색상을 `--gold`에서 `--teal`로 변경했습니다.

🎯 Why:
기존의 `--gold` 색상은 밝은 배경(흰색) 위에서 WCAG AA 명도 대비 기준(4.5:1)을 충족하지 못하여(명도 대비 약 2.18:1), 시력이 낮거나 화면을 보기 어려운 환경의 사용자에게 텍스트 가독성이 떨어지는 접근성 문제가 있었습니다. 이를 개선하기 위해 명도 대비가 충분히 높은 `--teal` 색상으로 변경하여 인지 부하를 줄이고 접근성을 향상시켰습니다.

📸 Before/After:
Before: `color: var(--gold);` (명도 대비 약 2.18:1, WCAG AA 실패)
After: `color: var(--teal);` (명도 대비 기준 충족)

♿ Accessibility:
WCAG 2.1 AA 기준에 부합하도록 텍스트와 배경의 명도 대비를 개선하여 텍스트의 가독성과 스크린 리더 환경 외의 시각적 접근성을 높였습니다.
---
 .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..1b7e22b 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-03 - Improve color contrast for readability
+**Learning:** Using the `--gold` variable for text on white/light backgrounds fails WCAG AA contrast standards (ratio ~2.18:1).
+**Action:** Avoid `--gold` on white backgrounds and use higher-contrast alternatives like `--teal` to ensure accessibility and readability.
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;
 }