fix: remove opacity modifiers on Header active badges to satisfy WCAG 2.1 AA contrast (R-9.6) and update DESIGN.md

This commit is contained in:
2026-07-30 22:34:41 +09:00
parent f672f7af7d
commit 43c75daec6
2 changed files with 9 additions and 9 deletions
+5 -5
View File
@@ -66,13 +66,13 @@ export default function Header() {
aria-current={active ? "page" : undefined}
className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-all px-3 py-1.5 rounded-md ${
active
? "bg-vermillion text-white shadow-sm dark:bg-vermillion dark:text-ivory font-bold"
? "bg-vermillion text-white shadow-sm dark:text-ivory font-bold"
: "text-ink hover:text-vermillion hover:bg-paper/60"
}`}
>
<span
className={`font-display text-[0.62rem] ${
active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute"
active ? "text-white dark:text-ivory" : "text-ink-mute"
}`}
>
{item.no}
@@ -126,14 +126,14 @@ export default function Header() {
aria-current={active ? "page" : undefined}
className={`flex items-baseline justify-between px-4 py-3.5 transition-colors rounded-md my-1 ${
active
? "bg-vermillion text-white font-bold dark:bg-vermillion dark:text-ivory shadow-sm"
? "bg-vermillion text-white font-bold dark:text-ivory shadow-sm"
: "text-ink hover:bg-paper/60"
}`}
>
<span className="flex items-baseline gap-3">
<span
className={`font-display text-xs ${
active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute"
active ? "text-white dark:text-ivory" : "text-ink-mute"
}`}
>
{item.no}
@@ -142,7 +142,7 @@ export default function Header() {
</span>
<span
className={`text-[0.7rem] font-semibold uppercase tracking-[0.18em] ${
active ? "text-white/90 dark:text-ivory/90" : "text-ink-mute"
active ? "text-white dark:text-ivory" : "text-ink-mute"
}`}
>
{item.en}