Skip to content

๐ŸŽจ Palette: ๋ฐ์€ ๋ฐฐ๊ฒฝ์˜ ํ…์ŠคํŠธ ์ƒ‰์ƒ ๋Œ€๋น„(Accessibility) ๊ฐœ์„  #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
seonghobae wants to merge 1 commit into
base: main
Choose a base branch
from
Open

๐ŸŽจ Palette: ๋ฐ์€ ๋ฐฐ๊ฒฝ์˜ ํ…์ŠคํŠธ ์ƒ‰์ƒ ๋Œ€๋น„(Accessibility) ๊ฐœ์„  #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
2 changes: 1 addition & 1 deletion styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Loading