デザインの様式を、動くデモ・効く理由・実装で踏んだ罠つきで解剖する図鑑。
様式名: レトロ／Y2K / ヒーロー
「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。
| 対象 | 文字色 | 背景 | 実効背景 | 比 | 判定 |
|---|---|---|---|---|---|
| ネオンシアン文字（暗地） | #22d3ee | #0a0a14 | #0a0a14 | 10.90:1 | AA 合格 |
| 本文 淡ラベンダー（暗地） | #c7c7e0 | #0a0a14 | #0a0a14 | 11.88:1 | AA 合格 |
| クロム見出しの最も暗い階調（暗地） | #9aa3b2 | #0a0a14 | #0a0a14 | 7.74:1 | AA 合格 |
| CTA（暗地の文字 on ネオングリーン） | #0a0a14 | #4ade80 | #4ade80 | 11.30:1 | AA 合格 |
| 壊れた例：白文字 on ネオングリーン地 | #ffffff | #39ff14 | #39ff14 | 1.36:1 | 不合格 |
<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>レトロ／Y2K バナー デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#0a0a14;
--cyan:#22d3ee; /* 暗地で 9.61:1 */
--pink:#ff5cc8; /* 暗地で 7.99:1 */
--green:#4ade80; /* 暗地で 11.29:1 */
--text:#c7c7e0; /* 本文。暗地で 12.98:1 */
}
body{background:var(--bg);color:var(--text);min-height:340px;position:relative;overflow:hidden;
font-family:"Arial Black",system-ui,"Hiragino Kaku Gothic ProN",sans-serif;
background-image:
radial-gradient(60% 50% at 15% 0%, rgba(34,211,238,.14), transparent 60%),
radial-gradient(55% 50% at 90% 100%, rgba(255,92,200,.16), transparent 60%);}
/* 走査線：Y2K/CRTの記号。低コントラストの装飾で、文字には掛けない */
body::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
background:repeating-linear-gradient(rgba(255,255,255,.03) 0 1px, transparent 1px 3px)}
.inner{position:relative;padding:34px 32px;z-index:1}
/* 装飾バッジだけをグリッチ対象にする。見出し・本文は常時グリッチさせない（可読性）。
複製はスクリーンリーダーに二重に読ませないため aria-hidden を付ける前提の実装 */
.badge{display:inline-block;position:relative;color:var(--bg);background:var(--cyan);
font-size:11px;font-weight:900;letter-spacing:.14em;padding:6px 14px;border-radius:6px;margin-bottom:18px}
.badge .g{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
clip-path:inset(0);opacity:0}
.badge:hover .g1{opacity:.9;color:var(--pink);transform:translateX(2px);animation:gl .4s steps(2) 1}
.badge:hover .g2{opacity:.9;color:var(--green);transform:translateX(-2px);animation:gl .4s steps(2) 1}
@keyframes gl{0%{clip-path:inset(0 0 60% 0)}50%{clip-path:inset(50% 0 10% 0)}100%{clip-path:inset(0)}}
/* グリッチは操作（hover）で1回だけ。動きに敏感な人には完全に止める（WCAG 2.3.3） */
@media (prefers-reduced-motion:reduce){.badge:hover .g{animation:none;opacity:0}}
/* クロム見出し：銀グラデを文字で切り抜く。グリッチはかけないので常時読める */
h1{font-size:clamp(36px,9vw,76px);line-height:.92;letter-spacing:-.02em;
background:linear-gradient(180deg,#f4f7fb 0%,#cfd6e2 42%,#9aa3b2 55%,#e8ecf3 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 rgba(34,211,238,.35))}
.ja{margin-top:12px;font-family:system-ui,"Hiragino Kaku Gothic ProN",sans-serif;
font-weight:900;font-size:clamp(15px,3.4vw,22px);color:var(--cyan)}
p{margin-top:14px;font-family:system-ui,"Hiragino Kaku Gothic ProN",sans-serif;font-weight:400;
font-size:13px;line-height:1.85;color:var(--text);max-width:26em}
.cta{display:inline-block;margin-top:20px;font-weight:900;font-size:13px;letter-spacing:.04em;
color:var(--bg);background:var(--green);padding:12px 26px;border-radius:8px;text-decoration:none;
box-shadow:0 0 0 2px rgba(74,222,128,.4), 0 6px 20px rgba(74,222,128,.25)}
.cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
</style></head><body>
<div class="inner">
<span class="badge">Y2K
<span class="g g1" aria-hidden="true">Y2K</span><span class="g g2" aria-hidden="true">Y2K</span>
</span>
<h1>CYBER<br>SURF</h1>
<p class="ja">2000年、あの頃のインターネットへ。</p>
<p>ネオンとクロムで初期ウェブの高揚感を出す。グリッチは装飾バッジにホバー時だけ、見出しと本文には掛けない。</p>
<a class="cta" href="#">ENTER →</a>
</div>
</body></html>