強制カラーモード対応
Windows のハイコントラスト（forced-colors: active）では背景色と影が消える。透明な border を持たせた「対応済み」と、色だけで形を作った「未対応」を模擬トグルで比べる。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 強制カラーでは background と box-shadow が消え、border と outline だけ残る。ボタンには透明でよいので border を持たせておく
- 選択中・押下中のような状態は色だけで作らない。太さ・下線・アイコンのどれかで二重に示す
- @media (forced-colors: active) では Highlight / CanvasText などシステム色キーワードを使う。固定色は上書きされる
- forced-color-adjust: none で逃げない。ユーザーが自分で選んだ配色を壊すことになる
コード（コピーして使えます）
<div class="fcm-wrap" id="fcm-wrap">
<div class="fcm-head">
<span class="fcm-title">通知の設定</span>
<button type="button" id="fcm-sim" aria-pressed="false" class="fcm-simbtn">強制カラーを模擬</button>
</div>
<div class="fcm-grid">
<section class="fcm-card fcm-ready" aria-labelledby="fcm-h1">
<h3 id="fcm-h1">対応済み</h3>
<div class="fcm-opts" role="group" aria-label="通知先">
<button type="button" class="fcm-chip" aria-pressed="true">メール</button>
<button type="button" class="fcm-chip" aria-pressed="false">Slack</button>
</div>
<button type="button" class="fcm-primary">保存</button>
<p class="fcm-why">透明な border と下線があるので、背景色が消えても輪郭と選択状態が残る</p>
</section>
<section class="fcm-card fcm-naive" aria-labelledby="fcm-h2">
<h3 id="fcm-h2">未対応</h3>
<div class="fcm-opts" role="group" aria-label="通知先">
<button type="button" class="fcm-chip" aria-pressed="true">メール</button>
<button type="button" class="fcm-chip" aria-pressed="false">Slack</button>
</div>
<button type="button" class="fcm-primary">保存</button>
<p class="fcm-why">背景色だけで形を作ると、白い塊になって境界も選択状態も消える</p>
</section>
</div>
<div class="fcm-band"><span class="fcm-tag">状態</span><span id="fcm-msg">通常の配色（forced-colors: none）</span></div>
</div>