強制カラーモード対応
Windows のハイコントラスト（forced-colors: active）では背景色と影が消える。透明な border を持たせた「対応済み」と、色だけで形を作った「未対応」を模擬トグルで比べる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- Windows ハイコントラストで壊れない部品
- 背景色だけで形を作った UI の点検
- 選択状態を色以外でも示したいチップ
- 避ける場面
- forced-color-adjust:none で逃げる
- 固定色で状態を作る
- border 無しのボタン
- 構成要素
- 模擬トグル
- 対応済みカード
- 未対応カード
- チップ（選択）
- 保存ボタン
- 状態の帯
- 持っている状態
- 通常
- フォーカス
- キーボード
Tab で模擬ボタン・各チップ・保存へ、Enter／Space で切替。チップは同じ群で排他選択
- 支援技術
透明な border と下線で forced-colors でも輪郭と選択が残る。@media (forced-colors: active) で Highlight／CanvasText を使う。選択は aria-pressed
- 動き
なし
デザインの要点
- 強制カラーでは 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>