🎨 Palette: [UX improvement] 대비 개선 및 마이크로 인터랙션 추가

.jules/palette.md

@@ -0,0 +1,3 @@
+## 2025-02-18 - Improve Color Contrast & Micro-interactions
+**Learning:** Some elements like `.dikw-grid span` used `--gold` on white backgrounds which resulted in a low contrast ratio (around 2.9:1), violating WCAG AA accessibility standards. Additionally, the lack of hover transitions on buttons and links made interactions feel abrupt.
+**Action:** Always verify color contrast ratios against background colors, swapping to higher contrast colors (like `--teal`) where necessary to ensure accessibility. Apply smooth transition timings to opacity, transform, and color properties on interactive elements to provide clear tactile feedback.

commit_message.txt

@@ -1,6 +1,16 @@
-🎨 Palette: [UX improvement] 언어 전환 버튼 접근성 및 호버 스타일 개선
+🎨 Palette: [UX improvement] 접근성 개선 및 마이크로 인터랙션 추가
 
-💡 What: 언어 전환 버튼에 `aria-label` 추가 및 버튼 요소들에 `hover` 시 `opacity` 변화 트랜지션 추가
-🎯 Why: 스크린 리더 사용자가 축약어(KO, EN) 대신 명확한 언어명을 인지하게 하고, 일반 사용자가 인터랙티브 요소에 대한 시각적 피드백을 받을 수 있도록 개선
-📸 Before/After: 버튼 호버 시 opacity가 0.8로 부드럽게 변경됨
-♿ Accessibility: `aria-label`을 통한 스크린 리더 음성 피드백 최적화
+💡 What:
+- `.dikw-grid span`의 텍스트 색상을 `var(--gold)`에서 `var(--teal)`로 변경하여 시인성을 개선했습니다.
+- 전역 링크(`a`) 및 언어 전환 버튼에 부드러운 상태 전환 효과(transition)를 추가했습니다.
+- 버튼(`.button`) 클릭 시 물리적 반응감을 주는 축소 효과(`transform: scale(0.98)`)와 트랜지션을 적용했습니다.
+
+🎯 Why:
+- 기존 골드 색상은 흰색 배경에서 명도 대비가 3:1 이하로 떨어져 WCAG AA 접근성 기준을 충족하지 못했습니다.
+- 마우스 오버 및 클릭 시 시각적/물리적 피드백이 없어 사용자 경험이 다소 밋밋하고 뻣뻣했습니다. 명확한 피드백을 통해 상호작용의 만족도를 높였습니다.
+
+📸 Before/After:
+(첨부된 스크린샷 참고 - 대비가 개선된 DIKW 섹션 및 텍스트 변경 확인 가능)
+
+♿ Accessibility:
+- 텍스트 색상 대비 개선을 통해 시력 보완이 필요한 사용자가 텍스트를 더 명확하게 읽을 수 있도록 접근성을 강화했습니다.

styles.css

@@ -41,6 +41,7 @@ body {
 
 a {
   color: inherit;
+  transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
 }
 
 .site-header {
@@ -107,7 +108,7 @@ a {
   font-size: 13px;
   font-weight: 850;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s, background-color 0.2s, color 0.2s;
 }
 
 .language-switch button:not([aria-pressed="true"]):hover {
@@ -217,13 +218,17 @@ h1 {
   text-decoration: none;
   font-size: 15px;
   font-weight: 800;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s, transform 0.1s;
 }
 
 .button:hover {
   opacity: 0.8;
 }
 
+.button:active {
+  transform: scale(0.98);
+}
+
 .button.primary {
   background: var(--ink);
   color: var(--white);
@@ -442,7 +447,7 @@ h1 {
 .dikw-grid span {
   display: block;
   margin-bottom: 38px;
-  color: var(--gold);
+  color: var(--teal);
   font-size: 14px;
   font-weight: 900;
 }