diff --git a/.Jules/palette.md b/.Jules/palette.md index bceddf1..e0912df 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -13,3 +13,7 @@ ## 2024-06-25 - Improve Color Contrast **Learning:** Found that using `--gold` for text on white or light backgrounds (like `--paper`) fails WCAG AA contrast standards, making the text difficult to read for some users. **Action:** Avoid using `--gold` on light backgrounds. Instead, use alternatives with better contrast like `--teal`. Retain `--gold` for dark backgrounds (like `--ink`) where it provides excellent contrast. + +## 2026-07-08 - [접근성] prefers-reduced-motion 설정 지원 +**Learning:** 시스템에서 애니메이션 축소 옵션을 켠 사용자에게도 스무스 스크롤링과 페이드 전환 효과가 불쾌감을 줄 수 있음을 확인했습니다. +**Action:** 사용자 시스템 설정에 맞춰 CSS의 `scroll-behavior`와 `transition-duration`을 비활성화하는 `@media (prefers-reduced-motion: reduce)` 쿼리를 전역으로 추가하도록 개선해야 합니다. diff --git a/CHANGELOG.md b/CHANGELOG.md index e5fc107..6397d45 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ # CHANGELOG ## [Unreleased] +- 시스템 접근성 설정(`prefers-reduced-motion`)에 따른 애니메이션 감소 기능 추가 - **성능 개선**: `i18n.js`에서 초기 로드 시 기본 언어가 한국어(ko)인 경우 불필요한 DOM 순회 및 텍스트 업데이트를 생략하도록 개선했습니다. - **테스트 추가**: 다국어 처리 로직의 무결성을 검증하기 위해 `test_i18n.html` 테스트 파일을 추가했습니다. diff --git a/styles.css b/styles.css index 1a99f04..bcce9c7 100644 --- a/styles.css +++ b/styles.css @@ -805,3 +805,15 @@ main:focus-visible { .skip-link:focus-visible { top: 0; } + +/* Accessibility enhancements */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +}